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 的時候就能夠不打包引入的第三方插件，由於已經提早打包好了，能夠提升一點打包速度。