開始之前：
1.安裝node環境
2.安裝npm或者cnpm（我使用的是npm）
3.編輯器使用VSCode
4.瀏覽器使用Chrome
*通過npm或者cnpm安裝的依賴，請務必注意版本號！！！過高或者過低的版本都有可能導致運行不成功！
1.新建zhihu-daily目錄（以下簡稱根目錄）并在VSCode中打開該目錄，使用“ crtl+` ”打開終端。在終端內輸入：
npm init
按回車以后，終端面板會提示輸入name、version、description、entry point、author等信息，可以修改相應的描述，也可以全部點回車表示默認輸入，然后目錄下會自動生成一個package.json文件。
*注意：name不可以出現大寫英文字母，否則會報錯。
{
? "name": "zhihu-daily",
? "version": "1.0.0",
? "description": "zhihu-daily based on webpack and vue",
? "main": "index.js",
? "scripts": {
? ? "test": "echo \"Error: no test specified\" && exit 1"
? },?
? "author": "h_xingzhiyuan@163.com",
? "license": "ISC"
}
在終端內輸入：
npm install webpack --save-dev
安裝webpack依賴，成功以后會在根目錄出現一個"node_modules"文件夾，這個文件夾保存了工程的所有依賴，以后通過npm安裝的依賴全部保存在該文件夾下。
2.在根目錄下新建webpack.config.js文件，這個文件用來保存webpack打包的基本配置信息，代碼如下：
var path = require('path');
var config = {
? ? entry: {
? ? ? ? main: './index'
? ? },
? ? output: {
? ? ? ? path: path.join(__dirname, './dist'),
? ? ? ? publicPath: '/dist/',
? ? ? ? filename: 'index.js'
? ? }
}
module.exports = config;
3.在根目錄下創建一個index.html文件，代碼如下：
Document
Document<!DOCTYPE html><html lang="en">
????????<head>????????????<meta charset="UTF-8">????????????<meta name="viewport" content="width=device-width, initial-scale=1.0">????????????<meta http-equiv="X-UA-Compatible" content="ie=edge">????????????<title>Document</title>????????</head>????????<body>????????????<div id="app"> Hello World! </div>????????????<script src="/dist/index.js"></script>????????</body></html>
4. 在根目錄下新建一個index.js文件，用來演示"頁面加載完成后，延遲5秒修改#app內容"的效果，代碼如下：
setTimeout(() => {
????document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
5.為了創建本地運行環境，我們需要安裝webpack-dev-server，該服務可以在本地搭建一個運行環境，在瀏覽器地址欄輸入"localhost:8080"就可以看到我們通過webpack打包生成的頁面效果。在終端輸入：
npm install webpack-dev-server --save-dev
然后修改package.json文件，在scripts屬性下新加"dev"屬性，該屬性包括了配置運行webpack-dev-server時的配置信息，如：
????--open代表自動打開瀏覽器。
? ? --host 0.0.0.0代表運行的域名可以輸入127.0.0.1、locallost、本機ip，如果不配置默認是localhost，也可以通過127.0.0.1訪問，但是不能通過本機ip訪問。
? ? --port 8888代表運行的端口號是8888，如果不配置則默認是8080。
代碼如下：
...
"scripts": {
? ? "test": "echo \"Error: no test specified\" && exit 1",
? ? "dev": "webpack-dev-server --open --host 0.0.0.0 --port 8888 --config webpack.config.js"
? },
...
*注意：json文件不能寫注釋，而且屬性名、值需要用雙引號包裹。
6.在終端內輸入：
npm run dev
運行成功以后會自動打開默認瀏覽器，但是由于我們設置的域名是"0.0.0.0"，導致在瀏覽器中出現"0.0.0.0:8888"頁面加載錯誤，那么手動改一下域名為127.0.0.1（或者localhost、本機ip）就可以出現我們剛才所寫的效果（此情況出現在windows環境下，mac正常）：頁面加載完成顯示"Hello World!"，5秒后變為"Hello Webpack And Vue!"。
總結：
（1）在npm init時，name不能有大寫字母出現
（2）在npm init時，如果main選項不默認是index.js，那么在webpack.config.js中也需要將entry.main選項配置為"./自定義名字"
（3）在安裝依賴的時候，如果不指明版本號（如：npm install webpack-dev-server），那么node會根據本地的npm版本安裝相應的依賴，這樣可能會導致運行出錯，所以當出現由于版本錯誤導致的運行出錯問題時，可以通過npm remove xx將該依賴刪除，再通過npm install?XXX@version（如：npm install?webpack-dev-server@2.4.2）進行指定版本的安裝
（4）npm install XXX --save-dev與npm install XXX --save的區別，詳情請參照npm install XXX --save-dev與npm install XXX --save的區別
完整代碼github地址：https://github.com/zhiyuanMain/zhihu-daily
