Document

本文已参与好文召集令活动，点击查看：[后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767) # 前言 Hello，大家好，我是和光不同尘，一个你肯定还没有听说过的新人写手，大家可以叫我和光最近我又在研究如何用 webpack 搭建 vue+ts 的前端项目了什么，你说社区有太多类似的文章，你已经看麻了我也很无奈啊，高深的东西我也整不明白，只能写点入门级的混个脸熟了... 什么，你说你用 vite 用 vue-cli 说实话我也喜欢用，还有 umi，都是很棒的工具，简洁优雅，省时省力，我从小用到大... 但总有人觉得自己亲手搭建的项目更强，更靠谱虽然我没有这样的自信，大概这就是我这个菜鸡和人家高级前端的差距吧废话不多说，我们这就操练起来代码我放在了这个仓库：[webpack5-ts-vue](https://github.com/yyeexin/webpack5-ts-vue) 有需要的话可以自行取用 # 一、基础打包第一部分先带大家回忆一下 `webpack` 的基础打包流程，我知道这些大家肯定都会的，我只是带大家回忆一下 ## 1. 新建项目找个地方新建名为 `webpack5-ts-vue` 的文件夹，打开终端进入此目录，安装 `webpack` 和 `ts` 相关依赖，初始化项目： ```cmd mkdir webpack5-ts-vue && cd webpack5-ts-vue npm install typescript webpack webpack-cli -D git init npm init -y npx tsc --init ``` 新建 `.gitignore` 文件，将 `node_modules` 文件夹添加进去，避免 `git` 必要的文件追踪 ## 2. 新建入口文件在项目根目录下新建 `src` 文件夹，新建 `index.ts` 入口文件并添加内容： ```cmd mkdir src && cd src && touch index.ts echo "const myName: string = \"和光不同尘\";" > index.ts ``` ## 3. 运行打包命令在 `package.json` 文件中添加打包脚本： ```json { "scripts": { "build": "webpack" } } ``` 在命令行中运行 `npm run build` ，发现报错了。阅读报错信息可知，`webpack` 没有找到正确的入口文件，并且告诉我们 `webpack` 查找入口文件的默认顺序是： ``` src.js src.json src.wasm src/index.js src/index.json src/index.wasm ``` 我们的 `index.ts` 文件并不在此列 ## 4. 添加 ts 解析工具 `ts` 文件并不是 `webpack` 能直接解析的，所以我们需要使用 `ts-loader` 来专门处理安装相关依赖： ```cmd npm i ts-loader -D ``` 在项目根目录新建 `webpack` 配置文件 `webpack.config.js`，写入如下内容： ```js module.exports = { entry: "./src/index.ts", module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, use: "ts-loader", }, ], }, }; ``` 再次运行打包命令，丝般顺滑，终端没有报错 ## 5. 修改配置文件在生成的 `dist` 目录中点开 `main.js` 文件，发现其中空空如也这是因为 `webpack` 默认以 `production` 模式运行，会使用 `tree-shaking` 功能对文件内容进行优化。而我们在 `index.ts` 中只有一条声明语句，且并没有使用这个声明的变量，`webpack` 的树摇功能自动删去了这行无用的声明语句，结果就是打包的文件是空文件我们可以手动声明以 `development` 模式运行： ```js module.exports = { mode: "development", }; ``` 再次运行打包命令，现在生成的文件就有内容了 ## 6. 生成 html 入口安装 `html-webpack-plugin` 插件处理 `index.html` 文件，此插件的功能是根据提供的模板文件，自动生成正确的项目入口文件，并把 `webpack` 打包的 `js` 文件自动插入其中 ```cmd npm i html-webpack-plugin -D ``` 在项目根目录新建项目入口 `index.html` 模板文件： ```html Document

``` 修改配置文件 `webpack.config.js`： ```js const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ title: "webpack5-ts-vue", template: "./index.html", }), ], // ... }; ``` 注意，只在配置文件中设置 `title` 并不起作用，`index.html` 文件需要做相应的修改： ```html <%= htmlWebpackPlugin.options.title %> ``` 这其实是 `EJS` 模板语法，其中的变量会在打包过程中被某些值替换 ## 7. 运行项目为了能更好的看到效果，我们将 `index.ts` 文件的内容修改的复杂些： ```ts const myName: string = "和光不同尘"; console.log(myName); [1, 2, 3].forEach((item) => { console.log(item); }); const isInclude = ["a", "b", "c"].includes("a"); console.log(isInclude); ``` 再次运行打包命令，`dist` 目录下生成了 `index.html` 和 `main.js` 两个文件，使用 `VSCode` 的 `live server` 插件或其他能够在本地开启静态资源服务器的工具打开 `index.html` 文件，打开控制台，可以看到在控制台成功输入了预期的结果： ```js "和光不同尘"; 1; 2; 3; true; ``` 这样基础的打包流程就完成了，现在的项目结构如下： ``` webpack5-ts-vue ├── src │ └── index.ts ├── index.html ├── package-lock.json ├── package.json ├── webpack.config.js └── tsconfig.json ``` # 二、开发服务器为了能有更好的开发体验，我们引入 `webpack-dev-server` ，启动开发服务器 ```cmd npm i webpack-dev-server -D ``` 在 `webpack.config.js` 添加配置： ```js module.exports = { // ... // webpack升级到5.0后，target默认值值会根据package.json中的browserslist改变，导致devServer的自动更新失效 // 所以 development 环境下直接配置成 web target: "web", devServer: { hot: true, // 启用热模块替换 open: true, // 打开默认浏览器 }, // ... }; ``` 在 `package.json` 中添加脚本： ```json { "scripts": { "serve": "webpack serve" } } ``` 这样我们运行 `npm run serve` 开发命令后，默认浏览器会自动打开，当我们修改了文件的内容时，浏览器也会自动刷新这里我们详细解释一下在实际开发中非常常用的 `proxy` 配置项，它的作用是设置代理，解决开发环境中的跨域问题。其原理是将我们本地发出的请求通过一个中间代理服务器，转发到真正的接口服务器，服务器之间的通信是没有跨域问题的 `proxy` 常用配置项如下： ```js module.exports = { // ... devServer: { proxy: { "/api": { // 需要代理到的真实目标服务器，如/api/user会被代理到https://www.juejin.cn/api/user target: "https://www.juejin.cn", // 是否更改代理后请求的headers中host地址，某些安全级别较高的服务器会对此做校验 changeOrigin: true, // 默认情况下不接受将请求转发到https的api服务器上，如果希望支持，可以设置为false secure: false, // 默认情况下/api也会写入到请求url中，通过这个配置可以将其删除 pathRewrite: { "^/api": "/", }, }, }, }, // ... }; ``` # 三、配置文件拆分为了更能体现我们企业级项目开发环境搭建的目标，现在来对 `webpack` 的配置文件进行环境拆分删除原来的 `webpack.config.js` 文件，新建 `config` 文件夹，新建 `webpack.base.js` 、 `webpack.dev.js` 和 `webpack.prod.js` 三个文件，并安装合并配置文件需要使用的依赖： ```cmd npm i webpack-merge -D ``` 在三个文件中分别写入以下内容： ## 1. 基础配置 ```js const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.ts", module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, use: "ts-loader", }, ], }, plugins: [ new HtmlWebpackPlugin({ title: "webpack5-ts-vue", template: "./index.html", }), ], }; ``` ## 2. 开发配置 ```js const { merge } = require("webpack-merge"); const baseConfig = require("./webpack.base.js"); module.exports = merge(baseConfig, { mode: "development", target: "web", devServer: { hot: true, open: true, }, }); ``` ## 3. 生产配置 ```js const { merge } = require("webpack-merge"); const baseConfig = require("./webpack.base.js"); module.exports = merge(baseConfig, { mode: "production", }); ``` 修改 `npm` 脚本： ```json { "scripts": { "build": "webpack --config ./config/webpack.prod.js", "serve": "webpack serve --config ./config/webpack.dev.js" } } ``` 这样就简单地对配置文件进行了环境上的区分，后续的各种工作只不过是根据不同的需求在不同的配置文件中添加配置而已，当然实际项目中的配置文件要比案例中复杂的多需要注意的是，配置文件中的路径并没有因为将配置文件放进更深一层的 `config` 文件夹而修改，这是因在 `webpack` 配置中有一个 `context` 属性，该属性用来解析入口 `entry point` 和加载器 `loader` ，其默认值是 `webpack` 的启动目录，一般就是项目的根目录 # 四、打包各类文件 `webpack` 是一个 `js` 文件打包工具，其他类型的文件一般都需要通过额外的加载器 `loader` 来实现解析和打包，下面我们具体来看 ## 1. vue 安装 `vue3` ： ```cmd npm i vue@next -S ``` 安装 `vue-loader` ： ```cmd npm install vue-loader -D ``` 在 `src` 文件夹下新建 `App.vue` 文件： ```ts ``` 修改 `index.ts` ： ```js import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app"); ``` 修改 `webpack.base.js` ： ```js module.exports = { module: { rules: [ { test: /\.vue$/, use: "vue-loader", }, ], }, }; ``` 现在对代码进行打包依然会报错，根据控制台的报错信息得知对 `.vue` 文件的解析还需要 `@vue/compoiler-sfc` 这个包： ```cmd npm i @vue/compiler-sfc -D ``` 另外，还需要配置对应的 `vue` 插件，它的作用是将你定义过的 `js`、 `css` 等规则应用到 `.vue` 文件中去： ```js const { VueLoaderPlugin } = require("vue-loader"); module.exports = { plugins: [new VueLoaderPlugin()], }; ``` 这样运行开发命令就已经不报错了，但是浏览器内还是一片空白，并且控制台还报错这是因为单文件组件被 `vue-loader` 解析成了三个部分，`script` 部分最终交由 `ts-loader` 来处理，但是 `tsc` 并不知道如何处理 `.vue` 结尾的文件为了解决这个问题，需要给 `ts-loader` 添加一个配置项： ```js module.exports = { // ... module: { rules: [ { test: /\.ts$/, loader: "ts-loader", exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], }, }, ], }, // ... }; ``` 这样 `.vue` 文件就能完美解析了注意，为了解决 `ts` 对 `.vue` 文件的报错问题，需要在 `src` 目录下添加一个 `shims-vue.d.ts` 类型申明文件 ```ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; } ``` ## 2. ts 虽然在第一节我们已经介绍过使用 `ts-loader` 处理 `ts` 文件，但是这会存在一个问题：该 `loader` 是把 `typeScript` 转换成 `javaScript` , 只负责新语法的转换，新增的 API 不会自动添加 `polyfill` 为了解决这个问题，我们还是要祭出 `babel`。`babel` 是一个工具链，主要用于旧浏览器或者环境中将 `ECMAScript 2015+` 代码转换为向后兼容版本的 `javaScript` ，包括语法转换、源代码转换等。关注社区的小伙伴可能知道，从 `babel7` 开始 `babel` 已经支持 `ts` 的编译，所以 `ts-loader` 可以弃用了安装 `babel` 相关依赖： ```cmd npm i babel-loader @babel/core @babel/preset-env @babel/preset-typescript -D ``` 修改 `webpack.base.js` ： ```js module.epxorts = { module: { rules: [ { test: /\.(t|j)s$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { cacheDirectory: true, }, }, }, ], }, }; ``` 在项目根目录添加 `babel.config.js` 文件： ```js module.exports = { presets: [ "@babel/preset-env", [ "@babel/preset-typescript", { allExtensions: true, //支持所有文件扩展名 }, ], ], }; ``` 现在可以安心的卸载 `ts-loader` 了 ## 3. scss 给 `App.vue` 文件添加样式，我使用了 `scss`，不出意外的报错了，因为缺少相应的 `loader` ```cmd npm i css-loader style-loader postcss-loader postcss-preset-env sass-loader sass -D ``` 在 `webpack.base.js` 中添加配置： ```js module.exports = { // ... module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"], }, ], }, // ... }; ``` 这里需要强调一下 `loader` 的应用顺序是从右往左，从下往上的 `postcss` 是一个加工样式文件的工具，可以提供自动添加样式前缀、修改单位等功能，具体使用了什么功能取决于你提供了哪些 `postcss` 插件，这些插件可以直接配置在 `loader` 中，更好的做法是在项目的根目录提供一份单独的配置文件在一些陈旧的项目中可能会看到 `autoprefixer` 这个插件，现在我们可以直接使用 `postcss-preset-env` 这个插件，自动添加前缀的功能已经包含在了其中在项目根目录下新增 `postcss.config.js` 配置文件： ```js module.exports = { plugins: ["postcss-preset-env"], }; ``` 如果在项目中你选择了 `less` ，只需安装 `less-loader` ，再修改少量的配置即可 ## 4. img 在 `webpack5` 之前，加载图片、字体等资源需要我们使用 `url-loader`、 `file-loader` 等来处理从 `webpack5` 开始，我们可以使用内置的资源模块类型 [Asset Modules type](https://webpack.js.org/guides/asset-modules/)，来替代这些 `loader` 的工作资源模块类型 `Asset Modules type` 分为四种： - `asset/resource` 发送一个单独的文件并导出 URL，之前通过使用 `file-loader` 实现 - `asset/inline` 导出一个资源的 data URI，之前通过使用 `url-loader` 实现 - `asset/source` 导出资源的源代码，之前通过使用 `raw-loader` 实现 - `asset` 在导出一个 data URI 和发送一个单独的文件之间自动选择，之前通过使用 `url-loader` 实现，并且可以配置资源体积限制 ```js module.epxorts = { module: { rules: [ { test: /\.(png|svg|jpe?g|gif)$/, type: "asset", generator: { filename: "images/[name]-[hash][ext]", }, }, ], }, }; ``` 需要注意的是这里的 `[ext]` 扩展名通配符包含了 `.` ，我们不需要额外再写，跟之前的 `loader` 有所区别 ## 5. font 同上，这里不再赘述 ```js module.epxorts = { module: { rules: [ { test: /\.(eot|svg|ttf|woff2?|)$/, type: "asset/resource", generator: { filename: "fonts/[name]-[hash][ext]", }, }, ], }, }; ``` # 五、其他配置接着再介绍一些让 `webpack` 更好用的配置和插件 ## 1. 注入环境变量为了可以跨终端设置环境变量，我们使用 `cross-env` 这个工具 ```cmd npm i cross-env -D ``` 修改 `npm` 脚本： ```json { "scripts": { "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js", "serve": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js" } } ``` 这样在 `webpack` 的配置文件中，可以通过 `process.env.NODE_ENV` 读取到当前设置的环境变量，我们可以根据这个变量来做一些配置优化 ## 2. 提取样式文件 `webpack` 官方文档中有这样一段描述： > For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. 大意是建议我们在生产环境使用 `mini-css-extract-plugin` 这个工具来抽离样式文件，这样在浏览器中可以拥有更好的加载效率安装相关依赖： ```cmd npm i mini-css-extract-plugin -D ``` 在 `webpack.base.js` 基础配置文件中做如下修改： ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const devMode = process.env.NODE_ENV !== "production"; module.exports = { // ... module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ devMode ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader", ], }, ], }, // ... }; ``` 在 `webpack.prod.js` 生产配置文件中添加插件： ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = merge(baseConfig, { // ... plugins: [new MiniCssExtractPlugin()], // ... }); ``` 这样在开发环境，我们依然使用 `style-loader` 有更高的开发效率，打包时，则能将样式抽离成单独的文件 ## 3. 自动拷贝文件当某些文件不需要经过 `webpack` 打包而直接使用，如一些三方脚本 `js` 文件等等，我们可以使用 `copy-webpack-plugin` 这个插件直接进行文件的拷贝例如我们有一个 `lodash.min.js` 文件放在了 `public` 文件夹下，现在我们想在项目中使用，有两个方案： - 方案一：在 `index.js` 入口文件中直接导入 ```js import "../public/lodash.min.js"; ``` 这种方案可行，但是会经过 `webpack` 打包处理，完全没有必要，降低了打包效率 - 方案二：在 `index.html` 中用 `` 标签引入 ```html ``` 在开发环境一切正常，但是当你打包后发布到服务器上你会发现，`lodash.min.js` 文件并不能成功加载，这是因为 `webpack` 并不会解析 `index.html` ，只会把它当做一个普通文本，所以需要我们手动处理其中引用的各个文件 ```cmd npm i copy-webpack-plugin -D ``` 修改 `webpack.prod.js`： ```js const CopyWebpackPlugin = require("copy-webpack-plugin"); module.exports = merge(baseConfig, { // ... plugins: [ new CopyWebpackPlugin({ // from后的路径是相对于项目的根目录，to后的路径是相对于打包后的dist目录 patterns: [{ from: "./public", to: "./public" }], }), ], // ... }); ``` 那么为什么在开发环境可以正常运行，主要是因为 `webpack-dev-server` 有一个功能：浏览器请求的文件如果不是通过 `webpack` 提供，则默认到项目根目录中寻找 devServer 启动时会给出提示： ``` Content not from webpack is served from D:\github-workspaces\webapck-ts-vue ``` 然后再根据我们在 `index.html` 配置的`./public/lodash.min.js`路径，就能正确找到静态资源的位置 ## 4. 清理打包目录在 `webpack5` 之前，我们都习惯于使用一款名叫 `clean-webpack-plugin` 的插件清理 `dist` 目录，从 `webpack5` 开始自带了清理打包目录的功能，只需在生产环境的配置文件中增加一个配置即可修改 `webpack.prod.js` 配置文件： ```js module.exports = merge(baseConfig, { // ... output: { clean: true, }, // ... }); ``` ## 5. 省略拓展名 `extensions` 配置项的功能是解析到文件时自动添加扩展名，其默认值为 `['.wasm', '.mjs', '.js', '.json']` ，我们可以根据需求将 `.vue` 也加入其中，虽然会带来一些便利，但实际上会在一定程度上影响 `webpack` 的运行效率，不推荐修改 ```js module.exports = { // ... resolve: { extensions: [".vue"], }, // ... }; ``` ## 6. 设置路径别名 `alias` 是一个非常和好用的配置项，当我们项目的目录结构比较深时，或者一个文件的路径可能需要 `../../` 这种路径片段才能访问到的时候，我们可以给一些常用的路径设置别名 ```js const path = require("path"); module.exports = { // ... resolve: { alias: { "@": path.resolve(__dirname, "../src"), }, }, // ... }; ``` 这样在代码中就能通过别名的方式引入文件： ```js import App from "@/App.vue"; ``` ## 7. 友好打包提示可装可不装的一个美化控制台输出的插件 ```cmd npm i friendly-errors-webpack-plugin -D ``` 修改 `webpack.dev.js` 配置文件： ```js const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin"); modules.exports = { // ... plugins: [new FriendlyErrorsWebpackPlugin()], // ... }; ``` ## 8. 包文件分析如果你想对打包之后的文件进行分析和优化，可以安装这个插件 ```cmd npm i webpack-bundle-analyzer -D ``` 修改 `webpack.prod.js` 配置文件： ```js const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); module.exports = { plugins: [ // ... new BundleAnalyzerPlugin({ analyzerMode: "disabled", generateStatsFile: true, }), // ... ], }; ``` 这样每次打包完成之后，都会在打包文件目录中生成一个 `stats.json` 文件在 `package.json` 中添加脚本： ```json { "scripts": { "analyze": "webpack-bundle-analyzer --port 3000 ./dist/stats.json" } } ``` 运行 `npm run analyze` 即可自动打开包文件分析页面 ## 9. 文件缓存 `webpack5` 之前我们常用 `cache-loader` 、`hard-source-webpack-plugin` 做文件缓存，加速二次构建， `webpack5` 现在内置了这种能力，默认会把编译的结果缓存到内存中，通过配置还可以缓存到文件系统中修改 `webpack.base.js`： ```js module.exports = { // ... cache: { type: "filesystem", }, // ... }; ``` ## 10. 代码分隔 `webpack` 默认会把所有的依赖打包到一个 `js` 文件当中，这个文件的大小会随着项目内容的增长而线性增大，导致浏览器加载变慢，可以使用代码分隔的方法来缓解这个问题在 `webpack.prod.js` 中新增配置： ```js module.exports = { // ... optimization: { splitChunks: { // 选择对哪些文件进行拆分，默认是async，即只对动态导入的文件进行拆分 chunks: "all", // 提取chunk的最小体积 minSize: 20000, // 要提取的chunk最少被引用次数 minChunks: 1, // 对要提取的trunk进行分组 cacheGroups: { // 匹配node_modules中的三方库，将其打包成一个trunk defaultVendors: { test: /[\\/]node_modules[\\/]/, name: "vendors", priority: -10, }, default: { // 将至少被两个trunk引入的模块提取出来打包成单独trunk minChunks: 2, name: "default", priority: -20, }, }, }, }, // ... }; ``` # 六、代码规范啊，你不喜欢用 eslint？企业级项目，别人都用，你确定不要吗？你确定吗？用吧用吧... ## 1. ESLint `ESLint` 用于检查代码规则，在开发过程中根据你提供的规则做检验，并给出错误提示在项目中安装 `eslint` 依赖： ```cmd npm i eslint -D ``` 运行`eslint` 初始化命令，根据提示进行选择，选择完毕后会自动安装相关依赖，并在项目根目录生成 `.eslintrc.js` 配置文件 ```cmd npx eslint --init $ √ How would you like to use ESLint? · problems $ √ What type of modules does your project use? · esm $ √ Which framework does your project use? · vue $ √ Does your project use TypeScript? · No / Yes $ √ Where does your code run? · browser $ √ What format do you want your config file to be in? · JavaScript $ The config that you've selected requires the following dependencies: @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue ``` [typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) 是 `ts` 官方提供的 `ESLint` 插件 [eslint-plugin-vue](https://eslint.vuejs.org/) 是 `vue` 官方提供的 `ESLint` 插件结合两份文档对 `.eslintrc.js` 适当修改后内容如下： ```js module.exports = { env: { browser: true, es2021: true, }, parser: "vue-eslint-parser", parserOptions: { ecmaVersion: 12, parser: "@typescript-eslint/parser", sourceType: "module", }, plugins: ["vue", "@typescript-eslint"], // extends的优先级也是从后往前的 extends: [ "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-recommended", "eslint:recommended", ], rules: { "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/ban-types": "off", }, }; ``` 查阅 `eslint-loader` 文档后得知这个 `loader` 已经被官方废弃，推荐使用新方案 `eslint-webpack-plugin` ```cmd npm i eslint-webpack-plugin -D ``` 在 `webpack.dev.js` 中添加配置： ```js const ESLintPlugin = require("eslint-webpack-plugin"); module.exports = { // ... // 注意如果不声明文件扩展名，eslint默认只会检查js结尾的文件 plugins: [new ESLintPlugin({ extensions: ["js", "ts", "vue"] })], // ... }; ``` 这样在运行开发命令后，在终端中就能拥有良好的代码规范提示 ## 2. Prettier 统一的编码风格有助于团队成员之间的高效协作当你接到一个需求，打开别人的代码，发现从来没有进行过格式化，是一件相当恐怖的事情可能你只需要改少量的代码，但因为你想要格式化整个文本让它变得美观好看，最终导致在代码仓库中显示更改了整个文件，难以追踪实际的代码变化为了解决这个问题，我们在项目中加入 `prettier` 的支持 ```cmd npm i prittier eslint-config-prettier eslint-plugin-prettier -D ``` 添加 `.prettierrc` 配置文件： ```json { "printWidth": 80 } ``` 这里我们只指定一个行宽，其它配置全部使用 `prettier` 的默认值，这也符合 `prettier` 这个工具的设计理念，它本身提供的配置项非常少，目的就是不希望用户随意更改，这样才能在更大程度上保持统一添加 `.prettierignore` 配置文件： ``` dist/ node_modules ``` 修改 `.eslintrc.js`： ```js module.exports = { // ... plugins: ["vue", "@typescript-eslint", "prettier"], extends: [ "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-recommended", "eslint:recommended", "plugin:prettier/recommended", ], // ... }; ``` 注意一定要将 `prettier` 的插件放置在最后一个这样就将 `eslint` 和 `prettier` 整合到了一起，每多写一个空格或少些一个分号，控制台都会有大红叉报错提醒，非常的赏心悦目 ## 3. lint-staged 如果在整个项目上运行 `lint` 效率会非常底下，更好的做法是只让进入暂存区的文件做代码校验，这会节约很多时间，我们需要使用的工具是 `lint-staged` ```cmd npm i lint-staged -D ``` 添加 `lint-staged.config.js` 配置文件： ```js module.exports = { "src/**/*.{js,ts,vue}": [ "eslint --fix --ext .js,.ts,.vue", "prettier --write", ], }; ``` 这样在命令行执行 `npx lint-staged` 就能手动在暂存区运行 `eslint+prettier` 做代码风格校验了 ## 4. husky 为了确保进入 `git` 仓库的代码都是符合代码规则且拥有统一风格，在代码提交之前，我们还需要强制进行一次代码校验，使用 `husky`（哈士奇），能够在我们做代码提交动作（commit）的时候自动运行代码校验命令 ```cmd npm i husky -D ``` 我们安装的是 `6.0` 版本以上的 `husky` ，根据文档先在 `package.json` 中添加一条脚本： ```json { "prepare": "husky install" } ``` 运行 `husky` 安装脚本： ```cmd npm run prepare ``` 运行完此命令会在项目根目录下生成一个 `.husky` 文件夹添加一个 `git hook`： ```cmd npx husky add .husky/pre-commit "npx lint-staged" ``` 执行完此命令后，会在 `.husky` 目录下自动生成一个 `pre-commit` 文件，但是经过我在公司 windows 电脑上的测试并没有成功生成，所以我们手动添加这个文件在 `.husky` 目录下新建 `pre-commit` 文件，写入一下内容： ```sh #!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged ``` 现在每当你执行 `commit` 操作时，都会自动执行 `lint-staged` 做规则校验，如果 `lint` 没有通过，则会 `abort` 当前的 `commit` 操作，直到你修复完了所有的 `error` 才能成功提交 # 写在最后到这里 webpack 基础的东西就写完了，囿于本人有限的技术水平，文章中肯定存在不少疏漏和没有讲清楚的地方，欢迎各位批评指正尽管如此以上内容还是花费了我不少气力，原因还是 webpack 工具链流程太长，每个工具都包含大量的配置项，想把每个配置的具体作用都摸清楚实在不是一件容易的事，本文只介绍了其中一些最核心最常用的配置和插件，难怪有人调侃有 `webpack 配置工程师` 这么一说我们也能大致预料到，自己配置出来的项目大概率是一个次优化的产物，肯定还存在大量改进的空间。`因此我更愿意相信社区的力量，在实际工作过程中使用社区里更成熟的工具`，它们有全职的开发者维护，投入的精力肯定比我个人甚至是绝大多数像我一样的普通开发者多得多，经过社区的检验后是相当靠谱的写这篇文章主要是自己最近在复习，巩固基础，现在正好学到了 webpack 部分，就顺手做一些总结，为自己以后面试做准备。如果碰巧帮助到了你，那我万分欣喜本人工作于杭州，活跃于长三角一带，如果想交个朋友或有进一步交流的需要的话，可以加我微信：esan_esan 我是和光，让我们一起进步，变得更强

{{ name }}