https://juejin.im/post/5cb98606f265da0356322e74

三件套

如果我们要单独配置webpack,三件套是必须要得:

• clean-webpack-plugin(清除旧的打包文件)
• html-webpack-plugin(引入模板文件,自动导入)
• webpack-dev-server(自动热更新)
  由于常见,我简单讲下配置,想了解详情配置,可去webpack查看

原ts项目的简单配置:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
  entry: "./src/main.ts",
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js' //主意这里最终的输出必须是js
  },
  // webpack-dev-server插件,最后打入内存
  devServer: {
    contentBase: './dist',
    open: true
  },
  resolve: {
    "extensions": ['.ts', '.js', '.json']
  },
  module: {
    rules: [
      {
         test: /\.css$/, //正则配置
         use: ['style-loader', 'css-loader'],// 先执行css-loader, 在执行styleloader
         exclude: [
          path.resolve(__dirname, 'src/components')
         ]
      },
      //局部处理
      {
        test: /\.css$/, //正则配置
        use: ['style-loader', { 
          loader: 'css-loader',
          options: {
            modules:{
              // localIdentName: '[path][name]__[local]--[hash:base64:5]' //官方
              localIdentName: 'kubor-[name]__[local]--[hash:base64:5]'
            }
          }
        }],// 先执行css-loader, 在执行styleloader
        include: [
         path.resolve(__dirname, 'src/components')
        ]
     },
      {
        test: /\.(eot|woff2|woff|ttf|svg)$/,
        use: ['file-loader']
      },
      {
        test:/\.ts$/,
        use: ['ts-loader'],
        exclude: /node_modules/ //忽略这里面的文件
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' //引入模板文件,自动导入
    }),
    new CleanWebpackPlugin() //每次清除无效文件
  ],
  mode: "development"
}

mini-css-extract-plugin

webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中

webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）

之前我有个单独的项目(自定义简历,线上PDF下载, 可静态部署,更新), 近期做了webpack3升级到4了,相应的插件也做了优化更新

chainWebpack

Vue CLI 内部的 webpack 配置是通过 webpack-chain维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

// vue.config.js
module.exports = {
 chainWebpack: config => {
   //添加一个路径别名 假设有在assets/img/menu/目录下有十张图片，如果全路径require("/assets/img/menu/img1.png")
//去引入在不同的层级下实在是太不方便了，这时候向下方一样定义一个路劲别名就很实用了
    config.resolve.alias
      //添加多个别名支持链式调用
      .set("assets", path.join(__dirname, "/src/assets"))
      .set("img", path.join(__dirname, "/src/assets/img/menu"))
      //引入图片时只需require("img/img1.png");即可
 }
}

最小化js文件

config.optimization.minimize(true);

image-webpack-loader

config.module
  .rule('images')
  .use('image-webpack-loader')
  .loader('image-webpack-loader')
  .options({
    bypassOnDebug: true
  })
  .end()

tree shaking

新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 “pure(纯的 ES2015 模块)”，由此可以安全地删除文件中未使用的部分。