2.webpack是什么？搭建vue脚手架

上一期，我们搭建了一个vue的基础工程，接下来，我们开始完善它，让它能够在我们的日常开发中使用

上一期回顾：https://www.jianshu.com/p/8e23b64da517

本期大纲

使用Eslint规范化代码
在工程中支持scss
支持资源文件识别

1. 使用Eslint规范化代码

ESLint 是一个广泛使用的 JavaScript 代码检查工具（也称为 linter）。以下是它的主要特点和用途：

代码质量检查
- 帮助发现代码中的错误和潜在问题
- 确保代码风格的一致性
- 识别可能的 bug 和反模式
主要功能
- 语法错误检查
- 代码风格规范
- 最佳实践建议
- 自动修复能力
  接下来，我们安装eslint，并向工程添加EslintWebpackPlugin插件，那么，它们两个有啥区别呢？
  简单说一下，其实EslintWebpackPlugin是将ESLint 检查集成到 Webpack 构建流程中，不需要单独运行eslint的命令

npm init @eslint/config
npm install eslint-webpack-plugin --save-dev

关于eslint的具体配置还是蛮多的，我就不细说了，大家可以去官网看下，说实话，我也没看完，都是边用边找
https://zh-hans.eslint.org/docs/latest/use/getting-started
下面具体说下EslintWebpackPlugin

常用的我整理了下，其它的我放到下面，有兴趣的可以自己去官网查看

 new ESLintPlugin({
      context: path.resolve(__dirname, "src"), // 指定文件根目录
      // extensions: ["js", "jsx"], // 指定要检查的文件扩展名
      exclude: "node_modules", // 排除的文件或目录
      // fix: true, // 启用自动修复
    }),

选项说明

cache: 启用缓存以减少执行时间，默认值为 true¹。
cacheLocation: 指定缓存位置，默认值为 node_modules/.cache/eslint-webpack-plugin/.eslintcache¹。
configType: 指定 ESLint 配置类型，可以是 eslintrc 或 flat，默认值为 eslintrc¹。
context: 指定文件根目录，默认值为 compiler.context²。
eslintPath: 指定 ESLint 实例的路径，默认值为 eslint²。
extensions: 指定要检查的文件扩展名，默认值为 'js'²。
exclude: 指定要排除的文件或目录，默认值为 'node_modules'²。
fix: 启用自动修复功能，默认值为 false²。
formatter: 指定格式化程序，默认值为 'stylish'²。
lintDirtyModulesOnly: 仅检查更改的文件，默认值为 false²。
threads: 启用多线程，默认值为 false²。

错误和警告处理

emitError: 是否始终发出错误，默认值为 true¹。
emitWarning: 是否始终发出警告，默认值为 true¹。
failOnError: 是否在有错误时使模块构建失败，默认值为 true¹。
failOnWarning: 是否在有警告时使模块构建失败，默认值为 false¹。
quiet: 是否仅处理和报告错误，忽略警告，默认值为 false¹。
outputReport: 将错误输出到文件，默认值为 false¹。

2.在工程中支持scss

首先，我们加入sass-loader

npm install sass-loader sass webpack --save-dev

emmm ....搞了半天，我们如果想要识别vue里面的修饰符，并且显示样式，还需要加入css-loader,vue-style-loader

这里说明一下，vue-style-loader，他是vue官方基于style-loader开发的一款用于处理 Vue 组件中的样式的loader,关于style-loader，他的作用主要有

将 CSS 注入到 DOM 中
通过创建 <style> 标签的方式，把 CSS 插入到 HTML 文件的 <head> 中
但是如果在大型的项目中，大多数还是推荐mini-css-extract-plugin，因为它可以将 CSS 提取到单独的文件中，这样可以更好地利用浏览器缓存。这个暂时不去研究，先回到vue-style-loader，以后有机会专门写点东西说说这方面的东西

命令敲一下；

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.接下来，我们配置资源文件相关的

在webpack5以前，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      }

Tips：现在我们有了一个相对完整的vue脚手架，下一节，我们开始做一些便于编码和开发的配置，比如自动格式化代码，开发环境区分，资源文件提示等，下面贴一下本次结束之后的完整配置文件

 
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')    // 设置 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", // 开发服务器的静态文件目录
    open: true, // 是否自动打开浏览器
    port: 3000, // 端口号
  },
  plugins: [
    new VueLoaderPlugin(),
    new ESLintPlugin({
      context: path.resolve(__dirname, "src"), // 指定文件根目录
      extensions: ["js", "jsx"], // 指定要检查的文件扩展名
      exclude: "node_modules", // 排除的文件或目录
      // fix: true, // 启用自动修复
    }),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

2.webpack是什么？搭建vue脚手架