webpack4學習筆記——優化部分（dllPlugin）

dlPlugin

開發過程當中引用的第三方模塊，開發者每每不會去修改源碼，而每次打包時又會從新打包引用的第三方模塊，所以採用dllplugin生成動態連接庫。

基本流程：

1. 新建打包第三方模塊的webpack.dll.conf.js文件（entry爲須要打包的第三方模塊，插件中調用webpack.DllPlugin插件生成映射文件），代碼打包前，先運行此文件對第三方模塊進行打包。
2. 在代碼打包的webpack文件中使用 webpack.DllReferencePlugin 插件，引用第1步生成的動態連接庫映射文件，代碼打包時會先經過此映射文件查看動態連接庫中是否有此模塊，如有則不打包。
3. 在html文件中引用動態連接庫（也可在代碼打包時經過插件完成此步驟）。

對於配置項context的理解：

1. 關於 dllPlugin 和 dllReferencePlugin 的context配置，若不配置此項，默認路徑爲插件運行的路徑，也就是運行node的項目文件根目錄。假設將webpack文件放在 '項目/build/webpack.xxx.js'，雖然插件是配置在webpack.xxx.js的plugins中，但運行的還是 '項目/node_modules'下的插件文件，其__dirname仍指的是 '項目/' 路徑。
2. dllPlugin的context配置決定了映射文件查找模塊的__dirname，假設context設置的絕對路徑爲 '項目/build/' 文件夾，則生成的映射文件中，映射到模塊的路徑都是 '../node_modules'。
3. 結合1和2，dllPlugin 和 dllReferencePlugin 的context配置要麼不設置(默認項目文件根目錄)，設置的話則context絕對路徑必須指向同一文件夾，不然dllReferencePlugin將找不到第三方模塊的映射地址。

關於打包內容

1. 全局引用的第三方包，webpack.dll.conf.js入口可直接設爲包名，只引用部分模塊的第三方包，最好不放在入口中，若將包名放在入口中，則會所有打包；若入口設爲引用部分，好比只使用vux的toastPlugin,入口設爲'vux/src/plugins/toast/index.js',這樣雖然只打包vux的toastPlugin，但引入toastPlugin的方式也要變(代碼以下)，使得開發較爲不便。

// import {ToastPlugin} from 'vux'
import ToastPlugin from 'vux/src/plugins/toast/index.js'

代碼部分

• webpack.dll.conf.js代碼：

//webpack.dll.conf.js

const path = require('path');
const webpack = require('webpack');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

// 將動態連接庫放到/dist/dll/下
const dllConfig = {
  entry: {
    vendor: [
      'vue/dist/vue.esm.js',
      'vue-router',
      'vuex',
      'axios',
    ]
  },
  output: {
    path: path.join(__dirname, '../dist/dll'),
    filename: '[name].dll.js',
    library: '[name]_library',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.DllPlugin({
      // 生成映射文件
      path: path.join(__dirname, '../dist/dll/manifest.json'),
      name: '[name]_library',
      // context: path.resolve(__dirname,'../')
    }),
    // ParallelUglifyPlugin可實現多線程代碼壓縮
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS: {
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
  ],
}

• 代碼打包的webpack中plugins添加：

new webpack.DllReferencePlugin({
  // context: path.resolve(__dirname,'../'),
  manifest: './dist/dll/manifest.json'
}),