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