webpack配置【一】webpack-cli中加入eslint规范,自动化测试，浮层错误抛出

eslint检测和修复

1.下载依赖

cnpm i eslint --save-dev
cnpm i eslint-loading --save-dev

2.配置

在根目录中新建一个.eslintrc.js

module.exports={
    env: {
        browser: true,
        commonjs: true,
        es6: true,
        node: true,
    },
    extends: 'eslint:recommended',
    parserOptions: {
        sourceType: 'module',
    },
    rules: {
        'comma-dangle': ['error', 'always-multiline'],
        indent: ['error',2],
        'linebreak-style': ['error','unix'],
        quotes: ['error', 'single'],
        semi: ['error','always'],
        'no-unused-vars': ['warn'],
        'no-console': 0,
    },
};

3.在pakage.js中加入

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env development",
    "build": "webpack --env production",
    "lintjs": "eslint app/ webpack.*.js --cache"
  },

4.运行

//检测语法
npm run lintjs
//自动修复错误
npm run lintjs -- --fix

在运行项目时，自动检测

5.在webpack.config.js中配置

const path=require('path');
//webpack生成html
const HtmlWebpackPlugin=require('html-webpack-plugin');

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
  },
  entry:{
    app:PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  module:{
    //运行监测
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
    ],
  },
  plugins:[
    //生成html
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
};

6.运行

npm run start

错误在页面的浮层抛出

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // 浮层错误抛出
    overlay: {
      errors: true,
      warnings: true,
    },
  },
  entry:{
    app:PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  module:{
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
};