// webpack.dll.config.js
module.exports = {
  entry: {
    // 定义程序中打包公共文件的入口文件vendor.js
    vendor: [path.resolve(src, 'js', 'vendor.js')],
  },
  
  plugins: [
    new webpack.DllPlugin({
      // manifest缓存文件的请求上下文（默认为webpack执行环境上下文）
      context: process.cwd(),
      
      // manifest.json文件的输出位置
      path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
      
      // 定义打包的公共vendor文件对外暴露的函数名
      name: '[name]_[hash]'
    })
  ]
}

// vendor.js
// 引入自定义在项目目录中的公共资源（可以在配置中声明alias映射关系）
import 'jquery';

// or 引入npm包资源
// import 'Vue';

// cross-env模块需要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

// webpack.config.js
module.exports = {
  entry: {
    // 项目入口文件
    'app':path.resolve(src, 'js', 'main.js')
  },
  plugins: [
    // dllPlugin关联配置
    new webpack.DllReferencePlugin({
      // 跟dll.config里面DllPlugin的context一致
      context: process.cwd(), 
      
      // dll过程生成的manifest文件
      manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
    })
  ]
}

// main.js
// 引入的公共模块如果在vendor中有被引用过，那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)

// import Vue from "Vue";
// console.log(Vue)

<!-- index.html -->
<script type="text/javascript" src="/UploadFiles/2021-04-02/vendor.dll.js">

如此，在接下来的本地开发（dev过程）和线上构建过程，将不再重复静态公共资源的构建，极大地缩减我们的构建时间。
结语


以上为webpack(Version 4)使用过程中的小小总结，希望对大家的学习有所帮助，也希望大家多多支持。