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'
}),