webpack 中 dll 的使用
本文最后更新于:2022年4月22日 上午
webpack 中 dll 的使用
打包成 dll 包
比如我们需要将 react
和 react-dom
使用 dll
打包
webpack.config.jsconst { merge } = require("webpack-merge");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DllPlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: {
react: ['react','react-dom']
},
output: {
filename: "[name].[contenthash:6]bundle.js",
path: path.resolve("./dll"),
// 当我们打包成一个库话,通常我们会会配置 library
library:'dll_[name]'
},
module: {
rules: [
{
test: /\.jsx?$/i,
use: "babel-loader",
},
],
},
plugins: [
// 使用 webpack 中自带的插件来打包 dll
new DllPlugin({
name: "dll_[name]",
path: path.resolve(__dirname, "../dll/[name].manifest.json"),
}),
],
};
执行打包命令
yarn build
可以看到以下文件,我们的打包就完成了
![](/2021/03/16/webpack/webpack%20%E4%B8%AD%20dll%20%E7%9A%84%E4%BD%BF%E7%94%A8/build-dll.png)
使用打包后的 dll 文件
webpack.config.jsconst { merge } = require("webpack-merge");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DllReferencePlugin } = require("webpack");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: {
index: "./src/index.js",
},
output: {
filename: "[name].[contenthash:6]bundle.js",
path: path.resolve("./build"),
},
module: {
rules: [
{
test: /\.jsx?$/i,
use: "babel-loader",
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new DllReferencePlugin({
// tontext 为配置根据 mainfest的上下文提供路径
context: path.resolve(__dirname, "../"),
manifest: path.resolve(__dirname, "../dll/react.manifest.json"),
}),
new AddAssetHtmlPlugin({
// 添加静态资源到 html 文件
filepath: path.resolve(__dirname, "../dll/react.e68e01.bundle.js"),
}),
],
};
src/index.jsimport React, { useState, } from 'react';
import ReactDom from 'react-dom';
export default function App() {
const [message, setMessage] = useState('hello react17')
return (
<div>
{message}
</div>
)
}
ReactDom.render(<App />, document.getElementById('root'));
执行打包命令
yarn build
可以看到以下文件,我们的 index
被打包了,同时 dll
目录下我们刚刚已经通过 dll
打包后的 react
也被复制过来了
![](/2021/03/16/webpack/webpack%20%E4%B8%AD%20dll%20%E7%9A%84%E4%BD%BF%E7%94%A8/build-dll-2.png)
我们打开可以看到我们刚刚在 index.js
编写代码可以正常运行了
![](/2021/03/16/webpack/webpack%20%E4%B8%AD%20dll%20%E7%9A%84%E4%BD%BF%E7%94%A8/hello-react.png)
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议,转载请注明出处。