小白学 Webpack之校验 JS 代码

插件eslint

webpack 插件eslint 帮我们校验 js 代码,方便查找错误和编写规范。

安装

npm install -D eslint
npm install -D eslint-loader

eslint 配置

可以去官方下载或者是自己生成,这里自己生成

npx eslint --init
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
Successfully created .eslintrc.json

使用 eslint-loader

配置

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  // ...
};

现在修改下index.js

require('../css/base.css');
require('../less/style.less');
var info=require('./module');
console.log(info)

let fn=(x,y)=>x+y;
console.log(fn(10+20))

var b=dig;
webpack

描述
这样我们就配置完了

推荐用插件操作 eslint-webpack-plugin

npm -D eslint-webpack-plugin

配置引入插件

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [
     new ESLintPlugin({
      files:'./src'
    })
        ],
  // ...
};

现在我们执行下webpack
描述
一样提示,搞定,2个插件都可以用

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。