Webpack 06 -- 处理 js 资源

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

• 针对 js 兼容性处理，用 Babel
• 针对代码格式，用 Eslint

注意：

我们先完成Eslint，检测代码格式无误后，再由Babel做代码兼容性处理。

1 . Eslint （插件）

可组装的 JavaScript 和 JSX 检查工具

• 使用Eslint，关键是写Eslint的配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查。

1 . 1 配置文件：

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

  • . eslintrc
  • . eslintrc.js
  • . eslintrc.json
  • 区别在于配置格式不一样

• 不新建：在原有文件基础上写

  • 在 package.json 中的 selintConfig

ESlint会查找和自动读取它们，所以配置文件只需存在一个就行

1 . 2 具体配置：

• 以. eslintrc.js为例

1. parseOptions 解析选项

2. rules 具体规则

3. extends 继承

• 在开发中一点一点写 rules 规则太麻烦了，可以继承官方推荐的规则，然后想要修改的规则在 rules 里面再进行修改就行，会覆盖继承过来的！！！

1 . 3 在 webpack 中使用：

• 先安装两个插件

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

• 引入插件到webpack配置文件中（所有插件都是构造函数，所以要 new）

// 插件
plugins:[
   // plugins 的配置
   new ESLintPlugin({
     // 检测哪些文件
     context:path.resolve(__girname,"src"),
   })
],

1 . 4 检测时间：

• vscode如果安装插件，编译时就会检测出来
• 不安装，只有运行打包后才会检测并报错

1 . 5 . eslintignore 忽略文件：

在里面写上不需要检查的文件

2 . Babel

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

2 . 1 配置文件：

2 . 2 具体配置：

1. presets预设

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

2 . 3 在Webpack中使用：

• 先安装包
  • npm install -D babel-loader @babel/core @babel/preset-env