21. 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.dell.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.dell.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