DLL（Dynamic Link Library）动态链接库在 webpack 中用来将可共享且不常改变的代码抽取成公共的库。
没有使用 DLL
react 和 react-dom 在 react 项目中是必备的两个库，把它们抽取出来单独打个包。
首先进行安装 npm install react react-dom --save
在 src 目录下新建 index.jsx 文件，编写 react 代码
import React, { Component } from 'react';
export default class App extends Component {
state = {
message: 'hello react ',
};
render() {
return <div>{this.state.message}</div>;
}
}
在一层级的 index.js 中引入 react 组件，并安装 axios 后使用它来发送一个请求
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
import axios from 'axios';
ReactDOM.render(<App />, document.getElementById('container'));
axios.get('https://httpbin.org/get').then((res) => {
console.log('res', res);
});
react 代码需要通过 babel 进行处理，可以参考 这篇文章，在没有使用 DLL 的时候，第三方库 react react-dom 和 axios 都被打包到了 702.js 文件中。
打包DLL库
如果需要对某些资源单独打包，就可以使用到 DLL，新建 webpack.dll.js 文件，自定义编译规则，通过 DllPlugin 生成 manifest.json文件，其中包含依赖的映射关系。
const { DllPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: {
react: ['react', 'react-dom'],
},
output: {
filename: './[name].js',
path: path.resolve(process.cwd(), './dll'),
library: '[name]',
},
plugins: [
new DllPlugin({
name: '[name]',
path: path.resolve(__dirname, './dll/manifest.json'),
}),
],
};
执行 npx webapck --config ./webpack.dll.js 后，生成三个文件，mainfest.json，react.js 和一个注释文件（可通过TerserPlugin去除）
如果此时直接编译 webpack.config.js 文件的话，react 和 react-dom还是会被作为第三方库和 axios 编译到一起。
引入DLL库
虽然已经通过 DLL 将 react 和 react-dom 自行打包了，但是没有告诉 webpack.config.js 不需要再把这两者打包到公共的库中。这时候请出 DllReferencePlugin 来处理。
const { DllReferencePlugin } = require('webpack');
module.exports = {
// 其它配置省略
plugins: [
new DllReferencePlugin({
manifest: path.resolve(process.cwd(), './dll/manifest.json'),
context: path.resolve(process.cwd(), './'),
}),
],
};
此时第三方库的 js 文件里已经没有了 react 和 react-dom，文件名由 702.js 变成了 559.js 是因为内容发生了变化。
运行编译后的 index.html 文件，发现报错 react is not defined，也没有在页面中显示 hello react 的代码。
将文件添加到 html 中
这是因为第三库打包的 js 文件中排除了 react 和 react-dom ，自行打包的 react.js 又没有被引入到 html 文件中，所以执行的时候就找不到文件了。
安装插件 add-asset-html-webpack-plugin ，通过它来引入文件到 html 中
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
// 其它配置省略
plugins: [
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(process.cwd(), './dll/react.js'),
outputPath: './auto',
}),
],
};
这样通过 DLL 编译的 react.js 文件就被引入到 html 文件中，页面也能正常显示
总结
使用 DLL 可以自定义打包的内容，分为以下三个步骤。
-
webpack.dll.js中使用DllPlugin生成 mainfest.json 和 js 文件 -
webpack.config.js中使用DllReferencePlugin去 mainfest.json 文件中找到映射关系，排除不需要打包的库 -
webpack.config.js中通过add-asset-html-webpack-plugin在 html 文件引入资源
以上是关于使用 DLL 打包的总结， 更多有关 webpack 的内容可以参考我其它的博文，持续更新中~
