webpack 中某些配置

webpack 每次配置後，過段時間不用就會遺忘，簡單記錄下最近用webpakc遇到的問題，重拾記憶。

一、入口文件

module.exports = {
  entry: 'a.js',  // 單個入口文件
  output: {
    path: '',
    publicPath: '',
    filename: '[name].js'
  }
}

module.exports = {
  entry: {
    index:['a.js', 'b.js', 'c.js']
  },  // 單個入口文件(將 a.js b.js c.js 文件合併成一個文件)
  output: {
    path: '',
    publicPath: '',
    filename: '[name].js'
  }
}

module.exports = {
  entry: {  // 多入口文件
    a:'a.js',
    b: ['b.js', 'c.js'],
    c:'c.js',
  },
  output: {
    path: '',
    publicPath: '',
    filename: '[name].js'
  }
}

 

二、輸出多個文件，而且自動在 html 中引入相應的 js 文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

var htmlTmp = {
  index: 'index',
  list: 'list',
  details: 'details'
}

module.exports= {
  plugins = []
}

Object.keys(htmlTmp).forEach(name => {
  var plugin = new HtmlWebpackPlugin({
    filename: name + '.html',  // 生成的文件名
    template: name + '.html',  // 模板文件
    chunks: [name],  // 爲每一個頁面只引入對應的 js 文件（必定要有的屬性）
    chunksSortMode: "dependency"  // 根據依賴順序加載文件，不然會出現加載問題（必定要有的屬性）

  }); webpackConfig.plugins.push(plugin); }); // 結果： 若是入口文件分別是 index.js list.js details.js,則會將三個文件分別插入 index.html list.html details.html 中

 

三、若是把全部文件合成一個 js 文件，那麼會有些公用的庫，咱們不須要每次改動一點點別的文件，就要從新加載一次庫文件（由於版本戳變了呀），怎魔辦？

拆分啊，用 commonsChunkPlugin 分割代碼：

在理解CommonsChunkPlugin代碼分割以前，咱們須要熟悉webpack中chunk的概念，webpack將多個模塊打包以後的代碼集合稱爲chunk。根據不一樣webpack配置，chunk又有以下幾種類型：

• Entry Chunk: 包含一系列模塊代碼，以及webpack的運行時(Runtime)代碼，一個頁面只能有一個Entry Chunk，而且須要先於Normal Chunk載入
• Normal Chunk: 只包含一系列模塊代碼，不包含運行時(Runtime)代碼。

// 提取代碼庫

var webpack = require("webpack");
module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["lodash","jquery"],
  },
  output: {
    path: "release",
    filename: "[name].[chunkhash].js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
  ]
};

// 上述配置將經常使用庫打包到一個vender命名的，並將以app.js爲入口的業務代碼打包到一個以business命名的。其中包含了webpack的運行時(Runtime)代碼，因此在頁面中必須先於業務代碼加載。
Entry ChunkNormal ChunkEntry Chunk

 

// 提取共有代碼
var webpack = require("webpack");
module.exports = {
    entry: { 
          page1: "./page1.js", 
          page2: "./page2.js" 
        },
    output: { 
          filename: "[name].[chunkhash].js" 
        },
    plugins: [ new webpack.optimize.CommonsChunkPlugin("common.[chunkhash].js") ]
}

// 上述配置將兩個頁面中通用的代碼抽取出來並打包到以common命名的，並將以page1.js和page2.js爲入口代碼分別打包到以page1和page2命名的。 
// 其中包含了webpack的運行時(Runtime)代碼，因此在兩個頁面中都必須在page1.[chunkhash].js和page2.[chunkhash].js前加載。


// --------------
// 在這種配置下，CommonsChunkPlugin的做用能夠抽象：將多個入口中的公有代碼和Runtime(運行時)抽取到父節點
// 將多個入口中的公有代碼和Runtime(運行時)抽取到父節點
Entry ChunkNormal ChunkEntry Chunkcommon.[chunkhash].js

// 每一次使用CommonsChunkPlugin都會將共有代碼和runtime提取到父節點。上述例子中，經過兩次CommonChunkPlugin的做用，runtime被提取到common.js中。
// 經過這種樹型結構，咱們能夠清晰的看出每一個頁面對各個chunk的依賴順序。var webpack = require("webpack"); module.exports = { entry: { p1: "./page1", p2: "./page2", p3: "./page3", ap1: "./admin/page1", ap2: "./admin/page2" }, output: { filename: "[name].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), new webpack.optimize.CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"]) ] };

// --------------

// 問題：本意就是在只修改業務代碼時，而不改動庫代碼時，打包出的庫代碼的chunkhash也發生變化，致使瀏覽器端的長緩存機制失效。

// 方案：提取 runtime （運行時）代碼

var webpack = require("webpack"); module.exports = { entry: { app: "./app.js", vendor: ["lodash","jquery"], }, output: { path: 'release', filename: "[name].[chunkhash].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin({names: ['vendor','runtime']}), ] };
// 這種狀況下，當業務代碼發送變化，而庫代碼沒有改動時，vender的chunkhash不會變，這樣才能最大化的利用瀏覽器的緩存機制

 

四、說說我遇到的問題，若是在 輸出的 html文件中引入公共 js（如：生成的 a.html 只引入了 a.js，b.html 只引入了 b.js ，想把vendor.js 和 manifest.js 也分別引入到 a.html 和 b.html 中），以下：

Object.keys(htmlTmp).forEach(name => {
  var plugin = new HtmlWebpackPlugin({
    filename: name + '.html',
    template: name + '.html',
    chunks: [name, 'vendor', 'manifest'],
    chunksSortMode: "dependency"
  });

  webpackConfig.plugins.push(plugin);

});

// 把 vendor.js 和 manifest.js 都引入生成的 html 中
// chunks: [name, 'vendor', 'manifest'], 把頁面中須要的文件放進數組
// chunksSortMode: "dependency"， 按依賴順序引入