Webpack中如何处理js资源？_webpack jsx-优快云博客

这里会有一个普遍性问题，就是js 资源 Webpack 本身就是可以处理的，为什么我们还要处理呢？

原因在于 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

还有在开发过程中，开发团队是对代码格式是有严格要求的，肉眼的检测不仅局限且费时费力，我们需要使用专业的工具来检测。代码的检测就是使用 Eslint，然后再由 Babel 做代码兼容性处理。

###Eslint代码检测

1.Eslint的配置

1.1 parserOptions 解析选项

2.3.修改webpack.config.js配置文件

2.3 修改webpack.config.js配置文件

###Eslint代码检测

Eslint是可组装的 JavaScript 和 JSX 检查工具。也就是说它是用来检测 js 和 jsx 语法的工具，可以配置各项功能。我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查。

1.Eslint的配置

它配置文件由很多种写法：

- `.eslintrc.*`：新建文件，位于项目根目录
  - `.eslintrc`
  - `.eslintrc.js`
  - `.eslintrc.json`
  - 区别在于配置格式不一样
- `package.json` 中 `eslintConfig`：不需要创建文件，在原有文件基础上写

主要配置上述一种方式，ESLint 会查找和自动读取它们。

这里以 `.eslintrc.js` 配置文件为例：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
};

其他规则可参考开发文档：https://eslint.bootcss.com/docs/user-guide/configuring

1.1 parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

1.2 rules 具体规则

- `"off"` 或 `0` - 关闭规则
- `"warn"` 或 `1` - 开启规则，使用警告级别的错误：`warn` (不会导致程序退出)
- `"error"` 或 `2` - 开启规则，使用错误级别的错误：`error` (当被触发的时候，程序会退出)

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

其他配置规则可参考开发文档：https://eslint.bootcss.com/docs/rules/

但是我们在开发过程中如果自己去写一条一条的规则，会极大的降低效率，我们可以继承现有的规则库：

[Eslint 官方的规则](https://eslint.bootcss.com/docs/rules/)：`eslint:recommended`
[Vue Cli 官方的规则](https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint)：`plugin:vue/essential`
[React Cli 官方的规则](https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app)：`react-app`

具体继承方式示例如下：

module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

2.Eslint在Webpack中的使用

2.1 下载对应插件

npm i eslint-webpack-plugin eslint -D

2.2 定义配置文件

创建 .eslintrc.js 文件：

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

2.3.修改webpack.config.js配置文件

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); //引入Eslint插件

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
    ],
  },
  //插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
      exclude:"node_modules", //排除node_module中的js文件
      cache:true,//开启缓存，提升代码检查速度
      cacheLocation:path.resolve(__dirname,'../node_modules/.cache/esLintcach'),
    }),
  ],
  mode: "development",
};

2.4输出检测结果

运行如下指令，在控制台即查看 Eslint 检查效果

npx webpack

3.Eslint在VSCode中的使用

下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决,但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

`.eslintignore`

```
# 忽略dist目录下所有文件
dist
```

###Babel的使用

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1.Babel的配置

配置文件由很多种写法：

- `babel.config.*`：新建文件，位于项目根目录
  - `babel.config.js`
  - `babel.config.json`
- `.babelrc.*`：新建文件，位于项目根目录
  - `.babelrc`
  - `.babelrc.js`
  - `.babelrc.json`
- `package.json` 中 `babel`：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可，以 `babel.config.js` 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

1.1 presets 预设

简单理解：这就是一组 Babel 插件, 扩展 Babel 功能

- `@babel/preset-env`: 一个智能预设，允许您使用最新的 JavaScript。

- `@babel/preset-react`：一个用来编译 React jsx 语法的预设

- `@babel/preset-typescript`：一个用来编译 TypeScript 语法的预设

2. Babel在webpack中的使用

2.1 下载对应Loader

npm i babel-loader @babel/core @babel/preset-env -D

2.2 定义 Babel 配置文件

- babel.config.js

```js
module.exports = {
  presets: ["@babel/preset-env"],
};
```

2.3 修改webpack.config.js配置文件

这里其实就是在rules配置中新添加了一个处理js文件的规则：

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); //引入Eslint插件

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
       //这是新添加的使用Babel兼容js语法的规则
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  //插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
      exclude:"node_modules", //排除node_module中的js文件
      cache:true,//开启缓存，提升代码检查速度
      cacheLocation:path.resolve(__dirname,'../node_modules/.cache/esLintcach'),
    }),
  ],
  mode: "development",
};

2.4 运行指令兼容js