使用Webpack有一段時間了，但是感覺之前學的用的都比較零散，所以在這裡整理一下Webpack的使用知識，從入門到進階。 創建項目 首先創建最簡單的一個項目 npm init 得到以下項目結構： 安裝Webpack 先來個全局的 npm i webpack g 再安裝項目中的 npm i webp ...
使用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中加相對路徑可以直接生成文件到電腦中的發佈網站下麵。
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還有更多的功能，這裡就不細說了。
