2021-02-20 今天看了一下最新的 vue-cli-service 居然还没有升级到 webpack5 ，那就用 webpack5 走一遍vue2的项目，看看能否有性能提升。

或许这是最后一篇webpack的教程了，vite2真香。

未完待续

快问快答

Q: 是否支持 webpack-chain ，这个包让配置更加清爽

截止2021-2-22，这个包还不支持 webpack5 ，暂时忽略，减少封装依赖也让配置本身更清楚易懂。

Q: 如何区分 dev 和 prod 的配置？

还是使用 webpack-merge 来完成通用和模式的配置合并。

Q: 如何处理缓存？cache-loader?

webpackV5 内置的缓存配置，让类似 cache-loader 不再是必需。，同时 cache-loader 宣布进入deprecated 状态，时代的眼泪忘了它吧。

Q: 多线程打包，thread-loader?

暂时不使用，配置还有点问题，先不用。

Q: 如何处理静态资源，url-loader file-loader raw-loader

webpackV5 已经内置了asset配置，这三个包成为历史的眼泪。 type: 'asset' 解君忧，忘了它吧。

Q: 如何处理 ts 资源，希望兼容校验和效率

使用 ts-loader 的 transpileOnly 只转换，不检查，检查让 fork-ts-checker-webpack-plugin 来做。

我们先专注的目标是，让webpack驱动 vue2+ts+less+router+vuex 这一套。

webpack构建流程：

  • 初始化，读取合并配置
  • 编译，从entry串起来chunk，递归编译，使用loader plugin
  • 输出，输出本地

计算打包速度 speed-measure-webpack-plugin

这里我们使用 babel 插件 @babel/preset-typescript 将 ts 转成 js，并使用 ForkTsCheckerWebpackPlugin、ForkTsCheckerNotifierWebpackPlugin 插件进行错误提示。

考虑引入 esbuild-loader

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

https://stylelint.io/user-guide/configure

  1. yarn init -y
  2. # 安装依赖
  3. yarn add vue core-js vue-class-component vue-property-decorator vue-router vuex
  4. # 安装开发依赖
  5. yarn add -D less typescript vue-template-compiler less-loader webpack webpack-cli babel-loader @babel/core @babel/preset-env vue-loader css-loader html-webpack-plugin file-loader url-loader mini-css-extract-plugin clean-webpack-plugin webpack-dev-server

瞥一眼 webpack@5 就行了。

那基本上可以开始了，我们先处理本地开发环境，主要通过 webpack-dev-server 来实时预览，后续在考虑打包和优化。

开发环境

  1. # 准备配置文件
  2. touch config/webpack.dev.js
  3. # 修改 package.json
  4. script.dev= webpack config --

Vue-loader

Vue有一个专门的网站用来介绍 vue-loader :

  • 把 .vue 文件转成对应的 html js css
  • css scope
  • hmr
  1. npm install -D vue-loader vue-template-compiler

同时安装这两个模块，注意版本对齐。

vue-loader 里面还提供了一个 plugin，使用形式可参考 

  1. // webpack.config.js
  2. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  4. module.exports = {
  5.   module: {
  6.     rules: [
  7.       // ... other rules
  8.       {
  9.         test: /\.vue$/,
  10.         loader: 'vue-loader'
  11.       }
  12.     ]
  13.   },
  14.   plugins: [
  15.     // make sure to include the plugin!
  16.     new VueLoaderPlugin()
  17.   ]
  18. }

如果URL以开头~，则其后的所有内容均被解释为模块请求。 如果网址以开头@，则也将其解释为模块请求。如果您的webpack配置中有一个别名@，这很有用