使用Webpack有一段時間了，但是感覺之前學的用的都比較零散，所以在這里整理一下Webpack的使用知識，從入門到進階。
創建項目
首先創建最簡單的一個項目
npm init
得到以下項目結構：
安裝Webpack
先來個全局的
npm i webpack -g
再安裝項目中的
npm i webpack --save-dev
此時項目結構為，且注意到package.json中自動生成了對webpack的開發依賴：
Webpack的打包初體驗
現在讓我們用Webpack來打包文件，那么新建一個js文件如下：
然后執行命令
webpack ./src/app.js ./build/bundle.js
那么就會在根目錄下生成一個build文件夾，里面會有一個bundle文件
可以查看bundle.js的js文件信息，里面的作用就是用了一個立即執行函數，然后將app.js的內容封裝成一個函數，作為參數傳進內部執行。這樣就可以來分析處理依賴什么的了。
原理就是這個樣子，具體的可以自己看一下底層代碼就行，對於這種只打包一個文件的bundle.js，代碼也很好看懂。
每次打包都這樣輸入一大串命令明顯很煩，所以需要用到package.json的腳本功能，很簡單，修改它為：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack的使用demo",
"main": "index.js",
"author": "韓子盧",
"license": "MIT",
"devDependencies": {
"webpack": "^3.10.0"
},
"scripts": {
"build": "webpack ./src/app.js ./build/bundle.js"
}
}
對比之前的文件內容，明白玩法就好了，然后我們如果再想打包，那么運行命令：
npm run build
也行，當然命令不一定要用build，把在package.json 里把build改為dota都行，此時運行的命令自然是：
npm run dota
這樣做的好處是，簡單方便，一些命令就不用記下來了，其次其他人很容易知道這個項目中如何進行打包。
Webpack命令的一些常用參數
| 參數 | 作用 |
|---|---|
| -p | 對打包的文件進行壓縮 |
| -d | 提供source map，方便調式代碼 |
| --watch | 監控源文件，如果源文件做了修改，那么立馬生成新的打包文件 |
webpack的配置文件
一般使用webpack都不會直接用webpack命令來生成某個腳本，因為它還有些強大的功能不好在簡單命令里面實現，這個時候就需要用到webpack的配置文件了。
此時在根目錄下新增一個文件：
然后命令行運行：
webpack
此時webpack會自動檢索根目錄下的webpack.config.js文件，然后根據這個文件中的配置去打包文件。
接下來我們分析一下webpack.config.js的代碼：
module.exports = {
entry: './src/app.js',
output: {
filename: './build/bundle.js'
}
};
module.exports為導出對象，webpack會直接讀取這個導出對象來打包代碼，所以我們將打包的配置直接賦值給這個對象。
entry代表入口，即打包的時候從哪個文件開始打包，
output代表輸出配置，即打包后生成的文件配置，其中的filename代表文件名。
上面的打包配置可以簡單理解為，從'./src/app.js'文件開始打包，生成一個文件名為bundle.js的文件，它的路徑是'./build/bundle.js'。
這里我們也可以這么寫：
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
}
};
注意，這里的path代表文件的輸出目錄，當我們用了path之后，filename就直接寫文件名，而不要再寫路徑了，因為新的路徑是path來的，如果還按照原來的，會在build文件夾下再生成一個build文件夾。
此時看到配置中還出現了一個__dirname變量，這個變量我們也沒賦值，放的是什么呢?
__dirname實際上是webpack在編譯時自己內部加上的一個變量，它代表webpack.config.js這個文件在電腦中的絕對路徑。
想到這么玩的好處了嗎，比如利用在filename中加相對路徑可以直接生成文件到電腦中的發布網站下面。
publicPath 代表資源引用的路徑。
publicPath一般用於bulid時，比如我現在生成js文件，但是我們不是放在本地服務器，而是放在CDN的某個文件夾test中。
那么我們將publicPath賦值為CDN上test文件夾的路徑，那么最后index里面引用的就是cdn上的文件了。
webpack的插件
webpack的功能強大有一部分的原因就是插件的功能多且強。
然而我們在使用插件前需要明白一點，我們使用的目的是為了解決問題，而不是為了使用而使用。
現在我們項目的問題是什么？
首先沒有html，這個簡單，直接新建一個html即可，不需要插件。
但是如果這樣玩的話，每次生成的js文件名都是bundle.js，那么網站就會形成緩存，導致明明發布了也沒有效果啊。
解決這個問題的辦法是在js后面加版本號，比如bundle.v1_1_0.js，我們可以手工操作進行修改，但是總有忘記的時候，這樣就會出錯。
那么問題就這么產生了，解決這個問題的插件就是：html-webpack-plugin。
接下來讓我們來開始使用這個插件。
首先webpack內部沒有集成這個插件，需要我們去安裝：
npm i html-webpack-plugin --save-dev
然后刪掉index.html，並修改webpack.config.js為：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
此時運行
webpack
可以發現在我們的輸出目錄build下還生成了一個index.html,里面還自動引入了我們生成的的bundle.js。
可是這樣並沒有解決我們的問題，那么讓我們來使用html-webpack-plugin的更多功能，修改webpack.config.js文件為：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Demo",
filename: 'demo.html',
minify: {
collapseWhitespace: true,
},
hash: true
})
]
};
生成后發現在輸出目錄生成的html文件名變味了demo.html，html的標題成了Webpack Demo，引用的js有了hash值，並且html還被壓縮了，去掉了里面所有可折疊的空白元素。
這樣就行了嗎？
不夠的，實際的開發過程中我們遇到html結構沒有這么簡單，會需要更多的html結構。
就比如我想在生成的html中引入一個bootstrap的css。
這又是一個新的問題，然而html-webpack-plugin的模板功能可以解決這個問題。
新建一個模板html文件template.html，
修改webpack.config.js為：
這樣就會以index.html文件為模板生成最后的html文件，當然html-webpack-plugin還有更多的功能，這里就不細說了。