【webpack5修行之道】第5篇：webpack对js语法检查

jay_mw

于 2021-06-17 16:01:37 发布

阅读量668

点赞数

分类专栏： webpack 文章标签： node.js 前端 webpack

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117282050

版权

本文介绍了如何在webpack5项目中集成eslint和eslint-loader，进行JS语法检查。通过安装相关依赖，配置webpack配置文件和规则，实现对源代码的实时错误提示。示例中展示了使用eslint-config-standard来简化配置，并演示了规则生效后的编译错误情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第4篇：webpack优化css处理及资源分类

这篇我们讲eslint 和 eslint-loader对js进行语法检查,

先安装包： npm install --save-dev eslint eslint-loader

修改webpack.config.js文件，添加eslint-loader

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    //入口文件
    entry: './src/index.js',
    //打包后的文件配置
    output: {
        //指定输出的目录,一般采用绝对路径
        path: resolve(__dirname,'build'),
        filename: 'js/[hash:10].built.js'
    },
    module: {
        //loader配置
        rules: [
            {
                //匹配以.css结尾的文件
                test: /\.css$/,
                //单个loader使用loader属性
                //loader: 'css-loader'

                //多个loader处理一个文件，需要使用use
                //use属性的执行顺序为逆序，也就是数组尾->数组首的顺序
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    // 例子	说明
                    // > 1%	全球超过1%人使用的浏览器
                    // > 5% in US	指定国家使用率覆盖