标签：文件 推给 js react webpack 文章 path DLL
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 的内容可以参考我其它的博文，持续更新中~
标签：文件,推给,js,react,webpack,文章,path,DLL 来源： https://www.cnblogs.com/vigourice/p/16412352.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。