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