webpack生产环境-js语法检查eslint

忘是亡心i 2023-07-18 06:54 14阅读 0赞

js语法检查eslint  
1，创建文件  
![在这里插入图片描述][20200325094355650.png]  
2，下载安装包

> npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

3，修改配置文件webpack.config.js

const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/js/index.js',
      output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          /*
            语法检查： eslint-loader  eslint
              注意：只检查自己写的源代码，第三方的库是不用检查的
              设置检查规则：
                package.json中eslintConfig中设置~
                  "eslintConfig": {
                    "extends": "airbnb-base"
                  }
                airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
              // 自动修复eslint的错误
              fix: true
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
4,配置package.json

"eslintConfig": {
        "extends": "airbnb-base",
        "env": {
          "browser": true
        }
      },

![在这里插入图片描述][20200325094851126.png]  
5，运行指令： webpack

[20200325094355650.png]: /images/20230528/52cb9c542e414c52a75bb4ee99adc572.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/b072e083980b41f593edcdca3f42a461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/a741be3888904802913b4d413254e763.png
[20200325094851126.png]: /images/20230528/1146965f9c6c44cebb6583de6832dcac.png