thread-loader多进程打包+enternals忽略打包+dll动态链接

当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包

thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间

{
  // 当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包
  // thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间
  test: '/\.js$/',
  exclude: /node_modules/,
  use: [
    {
      loader: 'thread-loader',
      options: {
        // 默认是cpu核 - 1, 可以通过这里更改开启几个进程
        works: 2
      }
    },
    {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'usage',
              corejs: {
                version: 3
              },
              targets: {
                chrome: '60'
              }
            }
          ]
        ]
      }
    }
  ]

}

配置externals来忽略哪些文件不需要打包

忽略打包后需要在index.html中手动引入, 可以引入静态资源或者cdn链接

 externals: {
    jQuery: 'jquery'
  },

除了忽略打包手动引入外还可以使用dll来对第三方库实现一次打包放入一个单独文件夹, 后续打包不参与, 并且自动引入html

需要配置webpack.dll.js来对那些单独打包的文件进行处理, 该文件夹里会生成打包后的文件和一个映射文件

源文件的打包配置里使用这个映射文件确定哪些不需要打包即可

启动指令为webpack —config 文件名, 配置如下

// 该文件运行一次是为了打包那些处理过的第三方库, 例如react或者jquery这种自己不会修改的代码
// 启动指令为webapck --config 该文件名
// 和webpack里打包设置相似但不完全一致, 比如下面的文件入口属性值只能是数组
const { resolve } = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    jquery: ['jquery']
  },
  output: {
    // 不能使用contenthash或者其他hash, 不然动态添加到html中引入不知道文件名是什么
    filename: '[name].js',
    // 注意不能也生成到了build打包后的文件夹了, 那里每次打包都要重新生成的
    // 要独立于webpack打包后的文件夹
    path: resolve(__dirname, 'dll'),
    // 打包后向外暴露一个对象, 注意不是文件,不能带后缀, 即export [name]
    library: '[name]_[hash]'
  },
  plugins: [
    // 借助webpack的DllPlugin生成一个映射, 源文件打包后根据这个映射找到提前已经打包好的文件
    // 生成一个manifest.json
    new webpack.DllPlugin({
      // 映射要找的暴露的内容
      name: '[name]_[hash]',
      // 生成的映射文件名, 在源文件打包时使用该映射即可
      path: resolve(__dirname, 'dll/manifest.json')
    })
  ],
  mode: 'production',
}

webapck.config.js

// 该插件的作用是将配置项里的文件引入到html头部
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')

plugins: [
  // 源文件打包时参照映射表, 表中有的就不打包
  new webpack.DllReferencePlugin({
    manifest: resolve(__dirname, 'dll/manifest.json')
  }),
  // 使用该插件将上面忽略掉不打包的文件自动添加到html头部
  new AddAssetHtmlWebpackPlugin({
    filepath: resolve(__dirname, 'dll/jquery.js')
  })
]