Webpack的使用指南-Webpack小結

參考文章：

https://baijiahao.baidu.com/s?id=1594972657801970108&wfr=spider&for=pc

使用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還有更多的功能，這裏就不細說了!

 

 

 

使用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還有更多的功能，這裏就不細說了!