22.webpack优化-dll方式将第三方库独立打包

对于一些不经常更新的第三方库，比如 jquery，react，lodash，我们希望能和自己的代码分离开，DLLPlugin 能把第三方代码完全分离开，即每次只打包项目自身的代码，而不再打包第三方库。

使用到的插件：

• webpck.DllReferencePlugin（属于webpack）:设置哪些第三方库不参与打包
• add-asset-html-webpack-plugin：将JavaScript或者CSS文件添加到 HTML中

1. 下载插件

   npm i webpack add-asset-html-webpack-plugin -D
   

2. 新建webpack配置文件webppack.dll.js

   const path = require('path');
   const webpack = require('webpack');
   
   
   module.exports = {
   mode: 'development',
   entry: {
   // 最终打包生成的[name] --> jquery
   // ['jquery'] --> 要打包的库是jquery
   /*
   无法使用如下配置，同时处理jquery和react,需要多个配置文件处理多个不同的库
   jquery:['jqury'],
   react: ['react'],
   可以将vue,vue-cli同时打包进vuebox
   vue: ['vue', 'vue-cli']
   */
   jquery: ['jquery'],
   },
   output: {
   //输出的文件名称
   filename: '[name].js',
   path: resolve(__dirname, 'dll'),
   // 存放动态链接库的全局变量名称，例如对应 jquery来说就是 jquery_ali214654
   library: '[name][hash]'
   },
   plugins: [
   // 打包生成一个 manifest.json --> 提供和jquery映射
   new webpack.DllPlugin({
   // 动态链接库的全局变量名称，需要和 output.library 中保持一致
   name: '[name][hash]',
   path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
   })
   ],
   };
   
   
   

3. 打包第三方库

   webpack --config webpack.dll.js
   

4. 打包完成后，可以在dll文件夹中看见

5. 在webpack配置文件webpack.config.js中

   const path = require('path');
   
   
   const {CleanWebpackPlugin} = require('clean-webpack-plugin');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const webpack = require('webpack');
   const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
   
   
   
   
   module.exports = {
   mode: 'development',
   entry: './src/js/index.js',
   output: {
   filename: 'js/[name][contenthash:8].js',
   path: path.resolve(__dirname, 'bulid'),
   },
   plugins: [
   new CleanWebpackPlugin(),
   new HtmlWebpackPlugin({
   template: './src/index.html'
   }),
   //告诉webpack哪些库不参与打包
   new webpack.DllReferencePlugin({
   manifest: path.resolve(__dirname, 'dll/manifest.json')
   }),
   //将文件自动引入到html中
   new AddAssetHtmlWebpackPlugin(
   {filepath: require.resolve('./dll/jquery.js')},
   ),
   ],
   }
   
   
   

6. 在webpack.config.js入口文件index.js中

   import $ from 'jquery';
   
   
   $('#btn').on('click', function (){
   console.log('click');
   })
   
   
   

7. 在模板文件index.html

   <button id="btn">按钮</button>
   

8. 进行打包

   webpack