【Webpack的使用指南 01】Webpack入門

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