webpack之处理js资源

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

• 针对 js 兼容性处理，我们使用 Babel 来完成

• 针对代码格式，我们使用 Eslint 来完成

Eslint

可组装的JavaScript和JSX检查工具

1. 配置文件

配置文件由很多种写法：

• .eslintrc.*

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

  • .eslintrc

  • .eslintrc.js

  • .eslintrc.json

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

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

配置文件只需要写一个

下载安装eslint的插件

npm install eslint-webpack-plugin eslint --save-dev

在webpack中引入插件

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.*

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

  • babel.config.js

  • babel.config.json

• .babelrc.*

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

  • .babelrc

  • .babelrc.js

  • .babelrc.json

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

2. 具体配置

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

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

1. 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

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",
};