一.webpack基础

针对兼容性问题 babel。
针对格式问题： seslint

1.eslint

使用

npm i eslint-webpack-plugin eslint -D

-.eslintrc.js

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

.eslintignore部分文件需要忽略eslint

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

配置完成之后，对webpack插件添加eslint对应插件

plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

2.babel

下载依赖

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

配置babel.config.js

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

presets 预设：

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

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

webpack配置： loader中

 {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

webpack的基础学习

一.webpack基础

1.eslint

2.babel