项目地址：https://github.com/Ewall1106/webpack-demo
是什么？
许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即 DLL 文件，放置于系统中。当我们执行某一个程序时，相应的 DLL 文件就会被调用。一个应用程序可使用多个 DLL 文件，一个 DLL 文件也可能被不同的应用程序使用，这样的 DLL 文件被称为共享 DLL 文件。— 百度百科
- 翻译一下，在 webpack 中的动态链接库就是：由于每次更改了内容
webpack都会自动重新编译打包，如果我们把用到的如react、jquery这些外部库抽离出去，改变文件的时候不让webpack重新打包这部分文件，直接引用，那么重新编译打包的速度就会快很多，这样我们开发的效率也会提升。 - 再翻译一下，所谓动态链接库就是帮你提升开发效率的，使
webpack在重编译的时候能打包更快。 - 在
webpack中实现DLL主要依赖两个插件webpack.DllReferencePlugin和webpack.DllPlugin，先记好这两个即可。
安装
- 还是从头开始，先新建一个文件初始化一下打包的基本配置。
- 我们以
react这个库为例，假设我们要把react做为动态链接库，让其不需要每次重新编译。
# 初始化
$ npm init -y
# 安装一些基础的包
$ sudo npm i webpack webpack-cli react react-dom html-webpack-plugin webpack-dev-server clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev- 接下来就是一些基本的 webpack.config.js 配置了，这些前面文章都已经就逐步详细介绍了，这里就一笔带过了，本篇文章只重点说明
DLL怎么配置的。 - 然后我们在入口文件中随便写几行代码，跑起来后我们就可以看到
hello world跃然于页面上了。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>hello world</div>, document.getElementById('app'));打包 React
- 我们要把
react做为动态链接库，所以我们单独为其新建一个打包配置文件 - webpack.react.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
react: ['react', 'react-dom'],
},
output: {
filename: '_dll_[name].js',
path: path.resolve(__dirname, './dist'),
library: '_dll_[name]',
libraryTarget: 'umd',
},
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]',
path: path.resolve(__dirname, 'dist', 'manifest.json'),
}),
],
};- 上面的配置重点是
plugins插件中配合的webpack.DllPlugin这个插件，它会生成一个名为manifest.json的文件，你可以理解为就是一张表，我们可以定义依赖，也就是说待会我们用到了react的时候，告诉webpack就直接在这个文件里找，别重复打包编译react了。 - 打包一下，我们就可以看到
dist文件夹中出现了打包后的react文件和manifest.json依赖表了。
$ npx webpack --config webpack.react.js/dist
+ _dll_react.js
+ manifest.json设置依赖
- 现在我们在主配置文件 webpack.config.js 中配置一下依赖。
module.exports = {
// ...
// ...
plugins: [
// 当使用react的使用，先去这个表里面找
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json'),
}),
],
};- 这个就是告诉
webpack，当我们页面中引入使用了react这个库的时候，直接去manifest.json里去找，然后引用打包好的_dll_react.js就行了。
小结
- 对比这两种方式，基本快了了
10ms左右，如果你的项目很大，将一些react、vue、jquery这些库都进行DLL配置后，那么开发效率提高还是可观的。
./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 56 ms
// 使用DLL配置react库后：
./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 41 ms-
DLL这个名称很吓人，但是其实配置起来并不难，主要就是利用了webpack自己实现的两个插件，就简单的说到这里。