webpack3.x 配置DllPlugin（加快打包速度）

第一步：新建webpack.dll.config.js文件

第二步：在以上文件中写入

const path = require('path')
const webpack = require('webpack')
const package = require('../package.json')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') //如果没安装过，需要安装一下
module.exports = {
  entry: {
    vendor:Object.keys(package.dependencies).filter((item) => {
          return item !='vue'
    })
  },
  output: {
    path: path.join(__dirname, '../static'),
    filename: 'dll.[name]_[hash:6].js',
    library: '[name]_[hash:6]',
  },
  plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true
        }
      }
    }),
    new webpack.DllPlugin({
      path: path.join(__dirname, '../', '[name]-manifest.json'),
      name: '[name]_[hash:6]'
    })
  ]
}
复制代码

第三步：编辑webpack.base.config

const manifest = require('../vendor-manifest.json')
module.exports={
    <!--去掉原来的vender字段-->
    entry: {
        app: './src/main.js'
    }，
    plugins: [
        new webpack.DllReferencePlugin({
                manifest:manifest
        }),
    ]
}
复制代码

第四步:package.json里写入

    "scripts":{
        "build:dll": "webpack --config build/webpack.dll.config.js -p"
    }
复制代码

第五步：npm run build:dll

跑完之后，生成 vender-manifest.json 和 dll.vendor.js 文件

第六步：引入dll.vendor.js

在index.html中 引入

    <script src="/static/dll.vendor.js"></script>
复制代码

以上都完成之后，以后打包npm run build 的时候就可以不打包引入的第三方插件，因为已经提前打包好了，可以提高一点打包速度。

转载于:https://juejin.im/post/5bceb2e8e51d457ac752f878