8.webpack的js语法检查eslint

需要的插件、loader

• eslint-loader 语法检查
• eslit eslit语法库
• eslint-config-airbnb-base aribnb语法规则
• eslint-plugin-import

1. 安装eslint和相关规则

   npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
   

2. 在入口文件src/index.js中添加如下内容

   function add(a,b){
       return a+b;
   }
   console.log(add(3+5));
   

3. 在webpack.config.js文件中进行如下配置

   const path = require("path");
   
   
   module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
   filename: 'built.js',
   path: path.resolve(__dirname, 'bulid')
   },
   module: {
   rules: [{
   test:/.js$/,
   exclude: /node_modules/, //排除node_modules中的第三方库
   loader: 'eslint-loader',
   options:{
   //自动修复不符合eslint规则的代码
   //fix:true
   }
   }]
   },
   plugins: []
   }
   
   
   

4. 在根目录的package.json文件中添加如下内容
   意思是eslint的语法规则是airbnb
   eslint不认识window,navigator等全局变量，需要在eslintConfig中添加，“browser”: true

   "eslintConfig":{
   	"extends": "airbnb-base"
   }
   

5. 打包

   webpack