webpack4 dll动态链接库打包第三方库

秒速五厘米 2021-07-24 17:02 469阅读 0赞

好处:
        (1)dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
        (2)App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
        (3)假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。
    	(4)之前将第三方库代码和源代码分离形成一个js文件,而它能把第三方库代码分离开,并且每次文件更改的时候,只会打包该项目自身的代码。所以打包速度会更快。
    
    1、下载
    	cnpm install -D add-asset-html-webpack-plugin
    	
    2、创建webpack.dill.js(文件名任意),通过webpack.DllPlugin将第三方库分离成单独文件,并生成manifest.json映射文件和分离的第三方库
    
    	const path = require('path');
    	const webpack = require('webpack');
    	
    	module.exports = {
    	  entry: {
    	    jquery: ['jquery'], 库名:['相关的库'],如:react:['react','react-dom']
    	  },
    	  output: {
    	    filename: '[name].js',  [name]对应entry中的键名
    	    path: path.resolve(__dirname, 'dll'),
    	    library:'[name]_[hash]',  打包的库中向外暴露的内容,需要与 DllPlugin 插件中的 name 属性值对应起来
    	  },
    	  plugins: [
    	    new webpack.DllPlugin({  manifest.json提供映射文件,提供和库的映射关系,即不需要打包的库名
    	      path: path.resolve(__dirname, 'dll/manifest.json'), 
    	      name: '[name]_[hash]',  映射库的暴露内容
    	    }),
    	  ],
    	  mode:'production'
    	}
    
    3、配置webpack.config.js
    	const webpack = require('webpack')
    	const AddAssetHtmlWebpackPlugin=require('add-asset-html-webpack-plugin')
    	
    	plugins:[
    	    new webpack.DllReferencePlugin({ 根据映射关系查找不参与打包的库,即不会引入该资源
    	      manifest: path.resolve(__dirname,'dll/manifest.json')  下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
    	    }),
    	    new AddAssetHtmlWebpackPlugin({  在html中引入资源,并打包成单独文件
    	      filepath: path.resolve(__dirname, 'dll/jquery.js'),  引入2步中分离的库
    	      outputPath:'src/js'  输出路径,不写默认为根目录
    	    })
    	    引入多个文件写法:
    	    	new AddAssetHtmlWebpackPlugin([
    			  { filepath: require.resolve('./some-file') },
    			  { filepath: require.resolve('./some-other-file') },
    			   Glob to match all of the dll file
    			  { filepath: require.resolve('./**/*.dll.js') },
    			]);
    	]
    	
    4、打包:
    	先webpack --config webpack.dll.js
    	再webpack

代码示例:

webpack.dll.js:

const path = require('path');
    const webpack = require('webpack');
    
    module.exports = { 
      entry: { 
        jquery: ['jquery']
        //库名:['相关的库'],如:react:['react','react-dom']
      },
      output: { 
        filename: '[name].js',
        path: path.resolve(__dirname, 'dll'),
        library:'[name]_[hash]', //打包的库中向外暴露的内容,需要与 DllPlugin 插件中的 name 属性值对应起来
      },
      plugins: [
        new webpack.DllPlugin({  //manifest.json提供映射文件,提供和库的映射关系,即不需要打包的库名
          path: path.resolve(__dirname, 'dll/manifest.json'), 
          name: '[name]_[hash]', //映射库的暴露内容
          // context: __dirname, //manifest (或者是内容属性)中请求的上下文
        }),
      ],
      mode:'production'
    }