dll

使用dll技术，对某些库（第三方库：jquery，react，vue...）进行单独打包，仅打包一次

1. 新建webpack.dll.js文件，该文件用于配置需要单独打包的库

   const { resolve, join } = require("path");
   const webpack = require('webpack')
   
   module.exports = {
     entry: {
       jquery: ['jquery']
     },
     output: {
       filename: '[name].js',
       path: resolve(__dirname, 'dll'),
       // 打包的库向外暴露出去的内容的名称
       library: '[name]_[hash]',
     },
     plugins: [
       new webpack.DllPlugin({
         name: '[name]_[hash]', //映射库暴露内容名称
         path: resolve(__dirname, 'dll/manifest.json') //输出路径 manifest.json提供和jquery映射
       })
     ],
     mode: 'production'
   }
   

2. 运行：webpack --config webpack.dll.js

3. webpack.config.js文件中，配置使用webpack.dll.js打包产生的映射文件。并配置html文件中自动引入库资源。

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

   webpack已完成下载

   2）代码：

   const webpack = require('webpack')
   const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
   new webpack.DllReferencePlugin({
       // 告诉webpack哪些库不参与打包，同时使用时名称也得变
       manifest: resolve(__dirname, 'dll/manifest.json')
   }),
   new AddAssetHtmlWebpackPlugin({
       // 将某个打包好的文件输出，并在html中自动引入该资源
       filepath: resolve(__dirname, 'dll/jquery.js'),
       //webpack运行打包后的资源文件--index.html中script标签的src属性值（路径）多了一个auto，因此要配置以下输出目录，否则找不到库资源。
       outputPath: 'auto'
   })