webpack 之(22) 优化配置 之 dll

这里与webpack(21)的内容差不多 但是思路不一样

webpack(21) 是cdn优化,是不打包node_module,然后引入cdn访问地址

这里是先将node_module先打包一次,后面不需要再打包,直接引用打包好的文件就行,这里的直接引用,还需要以下配置,否则就会出现用的不是打包的jquery,那么生成的文件会非常大

 

在平时打包过程中,node_module会被打包成一个chunk 文件,但是这样会导致文件太大了

所以:dll技术 会将 这些库单独拆开来打包成不同的文件(chunk)

 

第一步:

创建 webpack.dll.js

 

第二步:  在webpack.dll.js

/*
  使用dll技术,对某些库(第三方库:jquery,react,vue..) 进行单独打包
  当运行webpack时,默认查找webpack.config.js文件
  但是我们要执行webpack.dll.js文件
     --> webpack  --config webpack.dll.js
*/

const webpack = require("webpack")

module.exports = {
   entry:{
      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"
}

 

执行命令

webpack  --webpack.dll.js

 

 

第三步:上面的两个步骤已经实现了打包,那么后面就不需要再打包了,直接引用jquery.js(打包后的)了

配置webpack.config.js

const wepack  = require('webpack')
const AddAssetHtmlWebpackPlugin  = require('add-asset-html-webpack-plugin')

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