使用webpack.DllPlugin与webpack.DllR

首先： 

在项目根目录新建一个文件webpack.dll.config.js

var path = require('path');

var webpack = require('webpack');

var config = require('../config');

module.exports = {

  entry: {

      //用到的第三方插件

      vendor: ['vue-router','vuex','axios','vue','vue-swipe','jquery'] 

  },

  output: {

    path: path.resolve('./dist'),

    filename: '[name].dll.js',

    library: '[name]_library'

  },

  plugins: [

    new webpack.DllPlugin({

      path: path.resolve('./dist', '[name]-manifest.json'),

      name: '[name]_library'

    })

  ]

} 

然后：在webpack.base.conf.js中添加代码

plugins: [

    new webpack.DllReferencePlugin({

      manifest: require('./../dist/vendor-manifest.json')

    })

  ]

还需要在入口html文件中引入vendor.dll.js

<script src="vendor.dll.js"></script>

然后在package.json文件中添加快捷命令(粗体字）：

"scripts": {

    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

    "build:dll": "webpack --config webpack.dll.config.js"   

},

最后打包的时候首先执行npm run build:dll命令会在打包目录dist文件夹下生成 

vendor-manifest.json文件与vendor.dll.js文件。 

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。 

打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。 

然后在执行npm run build