Dllplugin

DllPlugin

在平常的项目中，我们要使用到很多的第三方库，如react 、vue 、jquery等。但是他们的内容基本是不变的，版本升级除外。而且这些库每次打包时都要重复的构建，所以我们需要把他们和我们自己写的项目源代码分开。webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库，那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，因此为了解决这个问题，DllPlugin 和DllReferencePlugin插件就产生了。

DLLPlugin 这个插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有webpack.config.js，还会新建一个webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest.json文件。该manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。
DllReferencePlugin 这个插件是在webpack.config.js中使用的，该插件的作用是把刚刚在webpack.dll.config.js中打包生成的dll文件引用到需要的预编译的依赖上来。

webpack.dll.config.js

在项目根目录下创建一个 `webpack.dll.config.js` 文件。然后配置代码如下：

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')

module.exports = {
  entry:{
    // 项目中用到该两个依赖库文件
    react: ['react'],
    reactDom: ['react-dom'],
    loadsh: ['loadsh']
  },
  output:{
    // 文件名称
    filename: '[name].dll.js',
    // 将输出的文件放到dist目录下
    path: path.resolve(__dirname,'dist/dll'),
    /*
     存放相关的dll文件的全局变量名称，比如对于jquery来说的话就是 _dll_jquery, 在前面加 _dll
     是为了防止全局变量冲突。
    */
    library: '_dll_[name]'
  },
  plugins:[
     // 使用插件 DllPlugin
      /*
       该插件的name属性值需要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。
       比如在jquery.manifest文件中有 name: '_dll_jquery'
      */
    new DllPlugin({
      name: '_dll_[name]',
       /* 生成manifest文件输出的位置和文件名称 */
       path: path.join(__dirname, 'dist/dll', '[name].manifest.json')
    })

  ]
}

执行语句

1	webpack --config webpack.dll.config.js

生成文件目录

DllReferencePlugin

DllReferencePlugin项的参数有如下：

context: manifest文件中请求的上下文。
manifest: 编译时的一个用于加载的JSON的manifest的绝对路径。
context: 请求到模块id的映射(默认值为 manifest.content)
name: dll暴露的地方的名称(默认值为manifest.name)
scope: dll中内容的前缀。

sourceType: dll是如何暴露的libraryTarget。
webpack.config.js 所有代码如下：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin}  = require('clean-webpack-plugin');
const webpack = require('webpack')
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
module.exports = {
  mode:'development',
  entry:'./index.js',
  output: {
    path:path.resolve(__dirname,'dist'),
    // filename:'bundle.js',  [name].[contenthash].js 上线生产环境使用
    filename: '[name].[hash].js'
    // publicPath:'dist'  引入文件路径 和图片路径均变化
  },
  devtool:'cheap-module-eval-source-map',
  module:{
    rules:[
      {
        test:/\.jsx?$/,
        exclude: /node_modules/,
        loader:'babel-loader',
        options:{
         
            // ['@babel/preset-env',{useBuiltIns:'usage'}]

         
         
        } 
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.png|jpg|gif$/,
        use:[
          { 
            loader:'url-loader',
            options:{
              name:'images/[name].[ext]',
              // outputPath:'images/',
              limit: 1024*4,
              // publicPath:'dist/images'
            }}
        ]
      }
    ]
  },
  
  optimization:{
    // tree Shaking 只支持 es moudle
    usedExports: true,
    // 代码分割
    splitChunks:{
      chunks:'all',
      cacheGroups: {
        vendors:false
      }
    }
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin(),
    // new webpack.HotModuleReplacementPlugin() 与contenthash 冲突
    // 告诉webpack使用了哪些第三方库代码
    new DllReferencePlugin({
      manifest: require('./dist/dll/reactDom.manifest.json')
    }),
    new DllReferencePlugin({
      manifest: require('./dist/dll/react.manifest.json')
    }),
    new DllReferencePlugin({
      manifest: require('./dist/dll/loadsh.manifest.json')
    })
  ],
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: 'localhost',
    port: 9000
  }
}