欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

21. webpack dll方式将第三方库独立打包

程序员文章站 2024-01-22 19:27:46
...

对于一些不经常更新的第三方库,比如 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
    
相关标签: # webpack webpack