关于前端:大数据请把文章推给想了解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 的内容能够参考我其它的博文，继续更新中~