webpack的常用配置

webpack｜cdn配置

为什么使用cdn

1. 使用高防cdn，不仅能解决不同地区的网络访问速度，还能减少因并发量太大给服务器带来的压力，可以隐藏网站源IP。

2. 在前端工程中，将静态文件放在cdn上，可以直观地减小资源包大小，同时加快首屏加载。（使用cdn，可以利用浏览器多线程的优化，同时下载静态文件和打包文件）

实现过程

1. 在index.html的头部引入cdn资源

   <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
   

2. 在webpack设置中添加externals

   externals:{
       'vue-router': 'VueRouter'
   },
   

3. 删除项目中相应资源的引入

   router/index.js

   // import VueRouter from 'vue-router'
   

对比

​ npm run build后dist文件夹的体积减少1M左右

webpack|babel-loader配置

webpack的loader，可以转译 JavaScript 文件

module: {
        rules: [{
					test:/\.js$/,
					include:/\.\src/,//应用于src目录下
                    exclude:/node_modules/, //排除某些文件或目录
                    use:["babel-loader?cacheDirectory"] //缓存
          },
          ...
         ]
         }

webpack｜thread-loader 多线程打包

多线程打包，因为happyPack停止维护了。只要将 thread-loader 放在构建耗时较大的 loader 之前，比如 babel-loader。

{
  test: /.js$/,
  use: [
    'thread-loader',
    'babel-loader'
  ],
}

webpack|dll 拆分bundles

拆分bundles，dll的作用是将项目中一些不常改变的依赖单独打包，DllReferencePlugin通过DllPlugin生成的manifest.json文件去引用对应的依赖。

webpack｜terser-webpack-plugin 多线程压缩

多线程压缩

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  ...

webpack|tree-shaking

在webpack5中已经自带tree-shaking功能，在打包模式为production时，默认开启 tree-shaking功能。