上一期，我們搭建了一個vue的基礎(chǔ)工程，接下來，我們開始完善它，讓它能夠在我們的日常開發(fā)中使用
上一期回顧：http://www.itdecent.cn/p/8e23b64da517
本期大綱
- 使用Eslint規(guī)范化代碼
- 在工程中支持scss
- 支持資源文件識別
1. 使用Eslint規(guī)范化代碼
ESLint 是一個廣泛使用的 JavaScript 代碼檢查工具（也稱為 linter）。以下是它的主要特點(diǎn)和用途：
-
代碼質(zhì)量檢查
- 幫助發(fā)現(xiàn)代碼中的錯誤和潛在問題
- 確保代碼風(fēng)格的一致性
- 識別可能的 bug 和反模式
-
主要功能
- 語法錯誤檢查
- 代碼風(fēng)格規(guī)范
- 最佳實(shí)踐建議
- 自動修復(fù)能力
接下來，我們安裝eslint，并向工程添加EslintWebpackPlugin插件，那么，它們兩個有啥區(qū)別呢？
簡單說一下，其實(shí)EslintWebpackPlugin是將ESLint 檢查集成到 Webpack 構(gòu)建流程中，不需要單獨(dú)運(yùn)行eslint的命令
npm init @eslint/config
npm install eslint-webpack-plugin --save-dev
關(guān)于eslint的具體配置還是蠻多的，我就不細(xì)說了，大家可以去官網(wǎng)看下，說實(shí)話，我也沒看完，都是邊用邊找
https://zh-hans.eslint.org/docs/latest/use/getting-started
下面具體說下EslintWebpackPlugin
常用的我整理了下，其它的我放到下面，有興趣的可以自己去官網(wǎng)查看
new ESLintPlugin({
context: path.resolve(__dirname, "src"), // 指定文件根目錄
// extensions: ["js", "jsx"], // 指定要檢查的文件擴(kuò)展名
exclude: "node_modules", // 排除的文件或目錄
// fix: true, // 啟用自動修復(fù)
}),
選項(xiàng)說明
cache: 啟用緩存以減少執(zhí)行時間，默認(rèn)值為 true1。
cacheLocation: 指定緩存位置，默認(rèn)值為 node_modules/.cache/eslint-webpack-plugin/.eslintcache1。
configType: 指定 ESLint 配置類型，可以是 eslintrc 或 flat，默認(rèn)值為 eslintrc1。
context: 指定文件根目錄，默認(rèn)值為 compiler.context2。
eslintPath: 指定 ESLint 實(shí)例的路徑，默認(rèn)值為 eslint2。
extensions: 指定要檢查的文件擴(kuò)展名，默認(rèn)值為 'js'2。
exclude: 指定要排除的文件或目錄，默認(rèn)值為 'node_modules'2。
fix: 啟用自動修復(fù)功能，默認(rèn)值為 false2。
formatter: 指定格式化程序，默認(rèn)值為 'stylish'2。
lintDirtyModulesOnly: 僅檢查更改的文件，默認(rèn)值為 false2。
threads: 啟用多線程，默認(rèn)值為 false2。
錯誤和警告處理
emitError: 是否始終發(fā)出錯誤，默認(rèn)值為 true1。
emitWarning: 是否始終發(fā)出警告，默認(rèn)值為 true1。
failOnError: 是否在有錯誤時使模塊構(gòu)建失敗，默認(rèn)值為 true1。
failOnWarning: 是否在有警告時使模塊構(gòu)建失敗，默認(rèn)值為 false1。
quiet: 是否僅處理和報告錯誤，忽略警告，默認(rèn)值為 false1。
outputReport: 將錯誤輸出到文件，默認(rèn)值為 false1。
2.在工程中支持scss
首先，我們加入sass-loader
npm install sass-loader sass webpack --save-dev
emmm ....搞了半天，我們?nèi)绻胍R別vue里面的修飾符，并且顯示樣式，還需要加入css-loader,vue-style-loader
這里說明一下，vue-style-loader，他是vue官方基于style-loader開發(fā)的一款用于處理 Vue 組件中的樣式的loader,關(guān)于style-loader，他的作用主要有
- 將 CSS 注入到 DOM 中
- 通過創(chuàng)建 <style> 標(biāo)簽的方式，把 CSS 插入到 HTML 文件的 <head> 中
但是如果在大型的項(xiàng)目中，大多數(shù)還是推薦mini-css-extract-plugin，因?yàn)樗梢詫?CSS 提取到單獨(dú)的文件中，這樣可以更好地利用瀏覽器緩存。這個暫時不去研究，先回到vue-style-loader，以后有機(jī)會專門寫點(diǎn)東西說說這方面的東西
命令敲一下；
npm install css-loader
npm install vue-style-loader
npm install sass-loader
在webpack.config.js里面配置一下loader
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ["vue-style-loader", "css-loader","sass-loader"],
}
],
},
3.接下來，我們配置資源文件相關(guān)的
在webpack5以前，我們處理圖片資源通過 file-loader 和 url-loader 進(jìn)行處理
現(xiàn)在 Webpack5 已經(jīng)將兩個 Loader 功能內(nèi)置到 Webpack 里了，我們只需要簡單配置即可處理圖片資源
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
}
Tips：現(xiàn)在我們有了一個相對完整的vue腳手架，下一節(jié)，我們開始做一些便于編碼和開發(fā)的配置，比如自動格式化代碼，開發(fā)環(huán)境區(qū)分，資源文件提示等，下面貼一下本次結(jié)束之后的完整配置文件
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/main.js",
output: {
path: __dirname + "/dist",
},
resolve: {
//別名
alias: {
//resolve 獲取絕對路徑的API，join也可以獲取; @ 也可以用 $,就是個 別名
'@': path.resolve(__dirname, './src') // 設(shè)置 src的絕對路徑
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: ["vue-style-loader", "css-loader","sass-loader"],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
],
},
devServer: {
static: "./dist", // 開發(fā)服務(wù)器的靜態(tài)文件目錄
open: true, // 是否自動打開瀏覽器
port: 3000, // 端口號
},
plugins: [
new VueLoaderPlugin(),
new ESLintPlugin({
context: path.resolve(__dirname, "src"), // 指定文件根目錄
extensions: ["js", "jsx"], // 指定要檢查的文件擴(kuò)展名
exclude: "node_modules", // 排除的文件或目錄
// fix: true, // 啟用自動修復(fù)
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
