7.eslint语法规范

下载

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

/ 语法检查： eslint-loader eslint 注意：只检查自己写的源代码，第三方的库是不用检查的 设置检查规则： package.json 中 eslintConfig 中设置~ “eslintConfig”: { “extends”: “airbnb-base” } airbnb —> eslint-config-airbnb-base eslint-plugin-import eslint /

//package.json
"eslintConfig": { 
"extends": "airbnb-base" 
}

//src/js/index.js
import '../css/box1.css';
import '../css/box2.css';
function add(x, y) {
  return x + y;
}
// 下一行所有eslint规则失效
// eslint-disable-next-line
console.log(add(3, 5));

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//设置node环境变量，默认是生产环境production
process.env.NODE_ENV = "development";
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/bundle.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          //将css转化为js
          "css-loader",
          //使用postcss-loader,解决css的兼容性问题
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                ident: "postcss",
                plugins: () => [
                  //帮助css找到package.json中的browserslist里面的配置，通过加载指定的css样式
                  require("postcss-preset-env")(),
                ],
              },
            },
          },
        ],
      },
      //这里是使用了eslint规范
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          //自动修复 eslint 的错误
          fix: true,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      //对打包后css重命名，并将之放入一个文件
      filename: "css/built.css",
    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: "development",
};