webpack之DllPlugin的使用

.dll文件称为动态连接库，是共享函数库的一种方式。webpack中使用DllPlugin的做用是将将网页中依赖的基础模块提取出来，打包放到一个单独的动态连接库文件中，当须要导入的模块存在与某个动态连接库时，这个模块不能再被打包，而是去动态连接库中获取。javascript

下面是我以vue为例提取vue相关模块的一个例子：html

在build文件夹下新建webpack_dll.conf.js；vue

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // js 执行文件入口
  entry:{
    // 把vue 相关的模块放到一个单独的动态连接库
    vue:['vue','vue-router','element-ui'],
  },
  output:{
    // 输出动态连接库的文件名称[name]表明当前动态连接库的名称，也就是entry配置中的vue
    filename:'[name].dll.js',
    path: path.join(__dirname,'../static/js'),
    library: '_dll_[name]',
  },
  plugins:[
    // 接入dllplugin
    new DllPlugin({
      // 动态连接库的全局变量名称，须要和output.library中保持一致
      // 该字段的值也就是输出的manifest.json文件中name字段的值
      name: '_dll_[name]',
      path: path.join(__dirname, '../static/js','[name].manifest.json'),
      context:__dirname
    })
  ]
}

这边我将打包后的文件放到static静态资源目录的好处是，最后npm run build以后的dist/static中会将static中的资源合并，并且static中的文件是不会打包的。避免咱们进行拷贝动态连接库文件的动做。java

在build/webpack.base.conf.js中添加plugins配置node

plugins:[
    // 告诉webpack使用了哪些动态连接库
    new DllReferencePlugin({
      context:__dirname,
      manifest: require('./vue.manifest.json'),
    })
  ],

在package.json中添加npm script 脚本命令webpack

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "vuedll": "webpack --config build/webpack_dll.conf.js"
  },

经过npm dun vuedll 命令打包会编译出两个文件web

在static静态资源目录会生成两个文件vue-router

在index.html中引入npm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>k-track</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

这样就配置好了。element-ui