小白入门（webpack处理js资源1）

前言

为什么js还有继续处理，webpack不是已经处理过了吗？

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

其次：在项目中，我们不能用肉眼去检查代码的格式，所以需要使用专业的工具来检查。

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

第一步：先完成Eslint,检查代码格式是否有误 

1. 能做什么？

它可以用来检测js和jsx语法的工具，可以配置各项功能。主要是我们需要写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检测

2. 下载插件

点击跳转到webpack官方文档

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

 下载完后 ，我们把插件添加到配置中

调用

 

3.开始配置

我们需要在里面写选项 ，我们看到官网，有很多选项

在这里我只写一个context选项 ，他的用法是检查文件

new ESLintPlugin({
    context:path.resolve(__dirname,"src")    //我们的代码主要是写在src文件中，所以我们检查这个文件
})

 我们重新打包文件，会发现报错，原因是找不到ESLint的配置文件

首先，我们需要在根目录下创建它的配置文件，名字一定要正确

之后我们在.eslintrc.js写以下代码：

点击跳转到Eslint官方文档

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

4.测试

之后我们在src文件下的main.js中 写一个错误代码

由于我们定义的规则是不能使用var定义变量，之后，我们打包webpack,果不其然，他指出了我们哪里有错误

 5.扩展

我们可以在vscode中下载一个插件，我们写错的时候，会直接提示我们，不需要我们打包才发现

 下载完成后，我们看到代码他就会有提示

 为了跟完善一点，我们可以看到dist/js文件夹中main.js文件大量爆红

这是因为这个插件不知道只用检查src文件，而把所有文件都给检查了

解决方法如下：

1.在根目录创建一个文件，它就是Eslint的忽略文件

我们只要在里面写上dist,返回看dist文件中的文件就不会有报错了

成功

由于本期文章内容有点多，第二步下期更新！

谢谢大家的支持，友友们，点赞关注支持一下！