webpack dll-plugin 的使用方法

dll需要一份单独的webpack打包配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
  entry: {
    dlls: ['vue', '其他第三方包']
  },
  output: {
    path: path.resolve(__dirname, './dist/dlls/'),
    filename: '[name].js',
    library: '[name]_[hash:6]'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.DllPlugin({
      path: path.join(__dirname, "dist/dlls/", "[name].manifest.json"),
      name: "[name]",
      context: __dirname
    })
  ]
}

在html中添加其他script前添加

1
<script type="text/javascript" src="dlls.js的路径"></script>