dll动态连接库

作用：

• 类似externals，指示webpack哪些包不参与打包
• 不同的是，dll会单独对某些库进行打包，将多个库打包成一个chunk

优点：

• node_modules会将所有库打包成一个chunk

• dll将库进行分类,然后打包成不同的chunk

• 项目目录：（注意：webpack.dll.js与webpack.config.js同级）

• 第一步：

  webpack --config webpack.dll.js

  —config：指定配置文件，以上例子中是webpack.dll.js，默认是webpack.config.js
  webpack.dll.js如下: ```javascript /* 使用dll技术，对某些库（第三方库：jquery、react、vue…）进行单独打包 当你运行 webpack 时，默认查找 webpack.config.js 配置文件 需求：需要运行 webpack.dll.js 文件

  --> webpack --config webpack.dll.js

  */

const { resolve } = require(‘path’); const webpack = require(‘webpack’);

module.exports = { entry: { // 最终打包生成的[name] —> jquery // [‘jquery’] —> 要打包的库是jquery jquery: [‘jquery’], }, output: { filename: ‘[name].js’, path: resolve(dirname, ‘dll’), library: ‘[name][hash]’ // 打包的库里面向外暴露出去的内容叫什么名字 }, plugins: [ // 打包生成一个 manifest.json —> 提供和jquery映射 new webpack.DllPlugin({ name: ‘[name][hash]’, // 映射库的暴露的内容名称 path: resolve(dirname, ‘dll/manifest.json’) // 输出文件路径 }) ], mode: ‘production’ };

第二步：
```shell
webpack

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, 'dll/manifest.json')
    }),
    // 将某个文件打包输出去，并在html中自动引入该资源
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, 'dll/jquery.js')
    })
  ],
  mode: 'production'
};