webpack之处理js资源

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法。

针对 js 兼容性处理，我们使用 Babel 来完成
针对代码格式，我们使用 Eslint 来完成

Eslint

可组装的JavaScript和JSX检查工具

1. 配置文件

配置文件由很多种写法：

.eslintrc.*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  ：新建文件，位于项目根目录

  - `.eslintrc`

  - `.eslintrc.js`

  - `.eslintrc.json`

  - 区别在于配置格式不一样

  - `package.json` 中 `eslintConfig`：不需要创建文件，在原有文件基础上写

配置文件只需要写一个

**下载安装eslint的插件**


npm install eslint-webpack-plugin eslint --save-dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

**在webpack中引入插件**

```javascript
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 插件中调用eslint
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // 检查哪些文件
            context:path.resolve(__dirname,"src"),
        }),
    ],

}

在根目录下创建.eslintrc.js文件

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

Babel—javaScript编译器

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

1. 配置文件

配置文件由很多种写法：

babel.config.*
1
2
3
4
5
6
7
8
9

  ：新建文件，位于项目根目录

  - `babel.config.js`

  - `babel.config.json`

- ```javascript
  .babelrc.*


：新建文件，位于项目根目录

- `.babelrc`

- `.babelrc.js`

- `.babelrc.json`

package.json 中 babel：不需要创建文件，在原有文件基础上写

2. 具体配置

我们以 babel.config.js 配置文件为例：

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

presets 预设

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

@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

3. 在 Webpack 中使用

下载包

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

2.定义 Babel 配置文件

babel.config.js

1
2
3

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

3.配置

webpack.config.js

const path = require("path")
const ESLintWebpackPlugin = require("eslint-webpack-plugin")

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: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"]
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]"
        }
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]"
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src")
    })
  ],
  mode: "development"
}

文章作者: Mr. Fortunate

文章链接: https://www.fortunate.cool/2023/03/18/webpack%E4%B9%8B%E5%A4%84%E7%90%86js%E8%B5%84%E6%BA%90/

前端