如何使用 Webpack 的 Dllplugin

在使用 Dllplugin 之前，首先我们应该了解它是干什么的，如果你的项目够大的话，可能每次编译都要花费很多时间，那么Dllplugin就是用来处理这个事情的。通过使用它你可以大大缩短编译的时间，提升构建速度。接下来我们就来看看如何使用这个配置。

下面是官网给出的介绍：

manifest.jsonDLLReferencePlugin

context
name: 暴露出的 DLL 的函数名 (TemplatePaths[hash][name]
path: manifest json 文件的绝对路径

new webpack.DllPlugin(options)

pathmanifest.jsonrequireimportDLLReferencePlugin

output.library

这个插件是在 webpack 主配置文件中设置的，这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

context: (绝对路径) manifest (或者是内容属性)中请求的上下文
manifestcontentname
contentmanifest.content)
namemanifest.nameexternals)
scope
sourceTypelibraryTarget)

new webpack.DllReferencePlugin(options)

__webpack_require__require

output.libraryname

从这里可以看出 Dllplugin和DllReferencePlugin是配合使用的，具体如下：

1.首先你需要创建一个webpack.dll.config.js文件，代码如下：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['lodash'] // 这里我是使用了lodash，你可以写入其他的依赖包
  },
  output: {
    path: path.join(__dirname, 'dll'), // 生成的文件存放路径
    filename: '[name].dll.js', // 生成的文件名字(默认为vendor.dll.js)
    library: '[name]_[chunkhash]'  // 生成文件的映射关系，与下面DllPlugin中配置对应
  },
  plugins: [
      new webpack.DllPlugin({
          // 会生成一个json文件，里面是关于dll.js的一些配置信息
          path: path.join(__dirname, 'dll', '[name]-manifest.json'),
          name: '[name]_[chunkhash]', // 与上面output中配置对应
          context: __dirname // 上下文环境路径（必填，为了与DllReferencePlugin存在与同一上下文中）
      }),
      new webpack.optimize.UglifyJsPlugin(),
      new CleanWebpackPlugin(['dll'])
  ]
}

2.在你的生产环境配置文件中加入DllReferencePlugin插件：

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common,{
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.DllReferencePlugin({
      context: __dirname, // 与DllPlugin中的那个context保持一致
      manifest: require('./dll/vendor-manifest.json') // 下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
    })
  ]
})

3.将生成的dll.js 文件引入index.html中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DllPlugin</title>
</head>
<body>
  <script src="../dll/vendor.dll.js"></script>
</body>
</html>

注意：src的路径的引入位置

4.package.json文件中加入dll：

  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dll": "webpack --config webpack.dll.config.js"
  }

5.接下来就是运行dll和build,首先yarn dll，然后yarn build，然后你就能够发现，编译的速度会相当的快奥！值得注意的是，就是每次添加新的依赖包，都需要重新yarn dll一下！

使用插件前：

使用插件后：

文章来源: 如何使用 Webpack 的 Dllplugin

标签

Webpack

lpl

dll文件

如何使用 Webpack 的 Dllplugin

`DllPlugin`

`DllReferencePlugin`