開(kāi)始之前：
1.安裝node環(huán)境
2.安裝npm或者cnpm（我使用的是npm）
3.編輯器使用VSCode
4.瀏覽器使用Chrome
*通過(guò)npm或者cnpm安裝的依賴，請(qǐng)務(wù)必注意版本號(hào)?。?！過(guò)高或者過(guò)低的版本都有可能導(dǎo)致運(yùn)行不成功！
1.新建zhihu-daily目錄（以下簡(jiǎn)稱根目錄）并在VSCode中打開(kāi)該目錄，使用“ crtl+` ”打開(kāi)終端。在終端內(nèi)輸入：
npm init
按回車以后，終端面板會(huì)提示輸入name、version、description、entry point、author等信息，可以修改相應(yīng)的描述，也可以全部點(diǎn)回車表示默認(rèn)輸入，然后目錄下會(huì)自動(dòng)生成一個(gè)package.json文件。
*注意：name不可以出現(xiàn)大寫英文字母，否則會(huì)報(bào)錯(cuò)。
{
? "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"
}
在終端內(nèi)輸入：
npm install webpack --save-dev
安裝webpack依賴，成功以后會(huì)在根目錄出現(xiàn)一個(gè)"node_modules"文件夾，這個(gè)文件夾保存了工程的所有依賴，以后通過(guò)npm安裝的依賴全部保存在該文件夾下。
2.在根目錄下新建webpack.config.js文件，這個(gè)文件用來(lái)保存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.在根目錄下創(chuàng)建一個(gè)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. 在根目錄下新建一個(gè)index.js文件，用來(lái)演示"頁(yè)面加載完成后，延遲5秒修改#app內(nèi)容"的效果，代碼如下：
setTimeout(() => {
????document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
5.為了創(chuàng)建本地運(yùn)行環(huán)境，我們需要安裝webpack-dev-server，該服務(wù)可以在本地搭建一個(gè)運(yùn)行環(huán)境，在瀏覽器地址欄輸入"localhost:8080"就可以看到我們通過(guò)webpack打包生成的頁(yè)面效果。在終端輸入：
npm install webpack-dev-server --save-dev
然后修改package.json文件，在scripts屬性下新加"dev"屬性，該屬性包括了配置運(yùn)行webpack-dev-server時(shí)的配置信息，如：
????--open代表自動(dòng)打開(kāi)瀏覽器。
? ? --host 0.0.0.0代表運(yùn)行的域名可以輸入127.0.0.1、locallost、本機(jī)ip，如果不配置默認(rèn)是localhost，也可以通過(guò)127.0.0.1訪問(wèn)，但是不能通過(guò)本機(jī)ip訪問(wèn)。
? ? --port 8888代表運(yùn)行的端口號(hào)是8888，如果不配置則默認(rèn)是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文件不能寫注釋，而且屬性名、值需要用雙引號(hào)包裹。
6.在終端內(nèi)輸入：
npm run dev
運(yùn)行成功以后會(huì)自動(dòng)打開(kāi)默認(rèn)瀏覽器，但是由于我們?cè)O(shè)置的域名是"0.0.0.0"，導(dǎo)致在瀏覽器中出現(xiàn)"0.0.0.0:8888"頁(yè)面加載錯(cuò)誤，那么手動(dòng)改一下域名為127.0.0.1（或者localhost、本機(jī)ip）就可以出現(xiàn)我們剛才所寫的效果（此情況出現(xiàn)在windows環(huán)境下，mac正常）：頁(yè)面加載完成顯示"Hello World!"，5秒后變?yōu)?Hello Webpack And Vue!"。
總結(jié)：
（1）在npm init時(shí)，name不能有大寫字母出現(xiàn)
（2）在npm init時(shí)，如果main選項(xiàng)不默認(rèn)是index.js，那么在webpack.config.js中也需要將entry.main選項(xiàng)配置為"./自定義名字"
（3）在安裝依賴的時(shí)候，如果不指明版本號(hào)（如：npm install webpack-dev-server），那么node會(huì)根據(jù)本地的npm版本安裝相應(yīng)的依賴，這樣可能會(huì)導(dǎo)致運(yùn)行出錯(cuò)，所以當(dāng)出現(xiàn)由于版本錯(cuò)誤導(dǎo)致的運(yùn)行出錯(cuò)問(wèn)題時(shí)，可以通過(guò)npm remove xx將該依賴刪除，再通過(guò)npm install?XXX@version（如：npm install?webpack-dev-server@2.4.2）進(jìn)行指定版本的安裝
（4）npm install XXX --save-dev與npm install XXX --save的區(qū)別，詳情請(qǐng)參照npm install XXX --save-dev與npm install XXX --save的區(qū)別
完整代碼github地址：https://github.com/zhiyuanMain/zhihu-daily
