【菜狗学前端】超超超详尽Webpack实践笔记

一认识Webpack

官网：https://webpack.js.org/

中文网站：https://www.webpackjs.com/ 或者 https://webpack.docschina.org/guides/

webpack 是一个用于现代 JavaScript 应用程序的打包工具。

当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，可以在浏览器上直接运行。在 webpack 看来, 前端的所有资源文件（js、json、css、img 、html...）都会作为模块处理。

(一) webpack的五大核心概念

1. 五大核心概念

webpack的五大核心概念：

Entry：指示 webpack 从哪个文件开始打包。

Output：指示 webpack 打包完的文件输出到哪里去，如何命名等。

Mode：模式，有生产模式 production 和开发模式 development 两种。

Loader： webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析。

Plugins：扩展 webpack 的功能，如打包优化、压缩等。

2. 生产模式VS开发模式

生产模式VS开发模式

生产模式 production(默认)

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:

优化代码运行性能

优化代码打包速度

开发模式 development

开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：

编译代码，使浏览器能识别运行，开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源。

代码质量检查，树立代码规范，提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

(二) 总结

webapck是一个构建工具，是基于node的，电脑上必须安装node，node版本需要大于16

打包器，是从入口开始，按照模块依赖进行打包，最终得到浏览器的可以识别的静态资源。

从某种程度来说，webpack代表的是一种架构能力。

二基础使用Webpack

(一) 搭建环境

1.创建一个文件夹

2.初始化一个配置文件

Plain Text
npm init -y

3.写入package.json所需要的依赖

JavaScript
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.18.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.0",
    "postcss-preset-env": "^7.7.1",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "vue-template-loader": "^1.1.0",
    "webpack": "^5.73.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "vue": "^3.2.37",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

4.安装依赖

Plain Text
npm i

(二) 零配置打包

现在，就涉及webpack，webpack-cli。

webpack 是核心内容提供了很多的API，插件。

webpack-cli 是在运行 webpack命令时，所依赖的一个工具。

本地安装的话，使用 npx 可以执行安装在本地的命令行可执行命令。

webpack版本是5.x版本

Plain Text
npx webpack

参数：指定模式打包、指定入口文件(直接写)、指定出口路径--output-path、指定出口文件名--output-filename

默认参数值：

入口文件：src/index.js

出口文件：dist/main.js

打包模式：production

Plain Text
# 将 src/index.js 打包至 dist/main.js 模式默认值：production
npx webpack

# 将 src/index.js 打包至 dist/main.js 模式指定为：development
npx webpack --mode development

# 将 src/one.js 打包至 dist/main.js
npx webpack ./src/one.js --mode development

# 将 src/one.js、two.js 打包至 dist/main.js
npx webpack ./src/one.js ./src/two.js --mode development

# 将 src/one.js 打包至 build/main.js
npx webpack ./src/one.js --output-path build --mode development

# 将 src/two.js 打包至 dist/index.js
npx webpack ./src/two.js --output-filename index.js --mode development

# 将 src/one.js 和 src/two.js 打包至 build/index.js
npx webpack ./src/one.js ./src/two.js --output-path build --output-filename index.js --mode development

(三) 基础配置打包

1.在项目根目录创建webpack.config.js文件

2.配置模式mode、入口entry、出口output

模式mode、入口entry、出口output(路径path只能是绝对路径)

JavaScript
const path = require("path")

module.exports = {
  mode: "development", // 开发打包
  // 入口
  // entry: "./src/main.js",
  // entry: path.resolve(__dirname, "src/main.js"),
  entry: {
    // app表示你打包后的资源名字就是app
    app: path.resolve(__dirname, "src/main.js"), // 绝对路径
  },
  // 出口
  output: {
    path: path.resolve(__dirname, "dist"), // 绝对路径
    // filename:"bundle.js" // 一捆一束
    filename: "js/[name].[chunkhash:8].js", // 一捆一束
    //每次打包时自动删除之前的打包文件
    clean: true
  }
}

3.配置开发服务器并使用其打包

到目前为止 webpack 基本上可以正常使用了，但在实际开发中你可能会需要：

提供 HTTP 服务而不是使用本地文件预览；

监听文件的变化并自动刷新网页，做到实时预览；

支持 Source Map，以方便调试。

前面打包是把包打包到硬盘上的。在开发时，需要配置一个开发服务器，这个开发服务器可以直接让我们在内存中打包，速度是远远高于硬盘的。我们之前用的脚手架，都是在内存中打开。

前面已安装该开发服务器，叫webpack-dev-server

webpack-dev-server能够修改后实时更新打包

但是一旦动了配置文件，便需要重新打包

在webpack.config.js中配置开发服务器

JavaScript
    //配置开发服务器端口
    devServer: {
        port: 8080
    }

之前打包是使用webpack进行打包的，直接是在硬盘上的打包，现在我们需要使用内存打包。

在终端控制台输入：

Bash
npx webpack serve

访问之，如下：(因为此时打包的文件里无index.html)

4.配置开发、生产模式脚本并执行

在package.json中配置脚本，如下：

执行脚本，如下：

5.html-webpack-plugin将打包后的js插入html页面

JavaScript
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development", // 开发打包
  // 入口
  // entry: "./src/main.js",
  // entry: path.resolve(__dirname, "src/main.js"), // 绝对路径
  entry: {
    // app表示你打包后的资源名字就是app
    app: path.resolve(__dirname, "src/main.js"), // 绝对路径
  },
  // 出口
  output: {
    path: path.resolve(__dirname, "dist"), // 绝对路径
    // filename:"bundle.js" // 一捆一束
    filename: "js/[name].[chunkhash:8].js" // 一捆一束
  },
  // 配置开发服务器
  devServer: {
    port: 8080
  },
  plugins: [
    new HtmlWebpackPlugin({
      //相对路径相对于启动nodejs服务器的目录在这里也就是react-webpack
      template: "./public/index.html"
    })
  ]
}

回顾一下，目前用到的依赖：

JavaScript
//webpack核心插件
"webpack": "^5.73.0",
//webpack命令插件
"webpack-cli": "^4.10.0",
//开发服务器插件
"webpack-dev-server": "^4.9.2",
//将打包的js插入指定html页面插件
"html-webpack-plugin": "^5.5.0",

三配置loader处理除JS|JSON外JS高级语法|JSX|CSS|图片等

(一) 前置知识

webpack眼中一切都是模块，默认情况下，只能理解js文件和json文件，这是webpack自带的能力，其它模块，webpack默认就不能处理了。

loader 能让 webpack 能够去处理其他类型的文件（比如css类型文件，图片类型等），并将它们转换为有效模块。

所以说要学习很多loader

less-loader 把less翻译成css

css-loader 把css代码转换为有效模块，让webpack处理

sass-loader 把sass翻译成css

babel-loader 可以转译 JavaScript 文件，加载后，让一些插件来翻译语法。如：箭头函数==>普通函数，let==>var。只有babel-loader还不行，还需要学习很多插件。ES6+它里面的语法非常多，意味着翻译语法的插件非常多。有一个概念，叫预设，预设是插件的集合。

谷歌浏览器可以识别，但是有的浏览器是不认识的。也就是说，webapck对于ES6+中的一些语法，它也不能直接转化成ES5，不能转化成ES5，浏览器对ES5的兼容性是最好。

我们需要使用loader，loader就是把webpack不能识别的模块，转化成webpack可以识别的模块。

如下：

JS模块中有高级语法，高级语法，如何转化成低级语法，让webpack识别呢？

答：最最最最最厉害的就是babel。

ES6中的语法，非常多，你要转化语法，需要安装对应插件

如你要把箭头函数转化成普通函数，那你就需要安装一个箭头函数转普通函数的插件，如你要把let转化成var，你需要安装一把let转成var的插件。也就说如果项目中用到了非常多的ES6语法，都需要转化，那就可以安装500个插件

babel给我们封装了很多预设，预设是插件集合，也就是集合中包含了很多的插件

如有一个预设，它可以把ES6中的大部分语法，转化成ES5，这个预设叫@babel/preset-env。

预设并不是转化所有语法，仅仅是大部分的，个别语法转化不了，需要单独安装插件。

后面需要学习一堆的loader，去转化不同的模块(使用loader来处理)。

.vue vue-loader

.jsx

.png

.less

.sass

.css

.json

.....

也需要学习一堆的插件，插件是用来增强webpack。

(二) 打包JS模块中的高级语法

1.相关依赖

babel-loader依赖：加载指定js

@babel/preset-env依赖：翻译指定的js--将es6+转回为es5让所有浏览器可以识别

2.配置

配置babel-loader加载

JavaScript
    module: {
        rules: [
            // 当webpack在工作时，遇到了以.js结束的模块，使用bable-loader进行加载
            // babel-loader是用来加载模块的，加载完成后，还需要使用@babel/xxx进行编译
            // 编译成ES5代码
            //查找以.js结束的字符串文件名？
            { test: /\.js$/, use: "babel-loader" }
        ]
    },

配置@babel/preset-env预设

JavaScript
module.exports = {
    // 预设(是插件的集合)
    presets: [
        ['@babel/preset-env']
    ],
    // 插件(某个特定的语法)
    plugins: [

    ]
}

4.执行

使let变var等...

5.说明

上面使用的预设不能打包装饰器，需要单独去安装对应的插件（打补丁），如下：

(三) 打包JSX模块(react)

1.相关依赖

JSON
"@babel/preset-react": "^7.17.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"

2.配置

配置babel-loader加载

JavaScript
    module: {
        rules: [
// 打包时，我们不希望webpack去打包node_module配置exclude: /node_modules/
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },
        ]
    }

配置@babel/preset-react预设

JavaScript
module.exports = {
    // 预设(是插件的集合)
    presets: [
        ['@babel/preset-react']
    ],
    // 插件(某个特定的语法)
    plugins: [

    ]
}

(四) 打包VUE模块(vue)

1.相关依赖

JSON
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "vue-template-loader": "^0.4.1",
    "vue": "^3.2.37"

2.配置

配置vue-loader加载

JavaScript
{ test: /\.vue$/, use: "vue-loader" }

配置VueLoaderPlugin插件

JavaScript
    const { VueLoaderPlugin } = require("vue-loader")
    plugins: [
        new VueLoaderPlugin()
    ]

(五) 打包CSS、SASS(SCSS)、LESS模块(内部样式)

1.相关依赖

JSON
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "sass-loader": "^13.0.0",
    "less-loader": "^11.0.0",
    "sass": "^1.52.3",
    "less": "^4.1.3"

2.配置xxx-loader加载

JavaScript
            // webpack工作时，遇到css结尾文件，先用css-loader加载解析，返回css代码
            // 交给style-loader处理，后以js形式将css代码插入head标签中，也就是内部样式
            // 从后往前处理，先css-loader后style-loader use: ["style-loader", "css-loader"]
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            // 先sass-loader后css-loader后style-loader
            { test: /\.(sass|scss)$/, use: ["style-loader", "css-loader","sass-loader"] }
            { test: /\.less$/, use: ["style-loader", "css-loader","less-loader"] }

(六) 打包图片

1.前置知识

在webpack眼中，一切都是模块，图片当然也是模块。

在webpack4中，有两个laoder可以处理，在wabpack5中这两个laoder就淘汰了，这两个laoder如下：(url-loader比file-loader更强大)

url-loader

file-loader

在webpack5中上面的两个laoder就淘汰了，对于图片的处理，webpack内置好了

相当于是file-loader

2.相关依赖

JSON
"file-loader": "^6.2.0",
"url-loader": "^4.1.1"

3.配置

方式一 url-loader

JavaScript
           //字符串，不过可设置limit：小于字符串，超过图片
           //{ test: /\.(png|jpg|svg|gif|jepg|webp)$/, use: "url-loader" }
            {
                test: /\.(png|jpg|svg|gif|jpeg|webp)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // limit单位是字节    1个字节 = 8位
                        //                  1KB = 1024个字节
                        //                  1MB = 1024KB
                        limit: 1024 * 50, // 如果图片小于50kb，打包字符串，如果图片大于50kb，打包成图片
                        name: 'imgs/[name].[hash:8].[ext]'
                    }
                }]
            },

方式二 file-loader

JavaScript
//直接图片
{ test: /\.(png|jpg|svg|gif|jepg|webp)$/, use: "file-loader" }

方式三 webpack内置图片处理

JavaScript
  // type: "asset/resource" 相当于使用了file-loader
            {
                test: /\.(png|jpg|svg|gif|jpeg|webp)$/, type: "asset/resource", generator: {
                    filename: 'imgs/[name].[hash:8].[ext]'
                }
            },

四进阶使用Webpack

(一) 将配置拆分为公共、开发、生产配置

打包分两种，一种是开发时的打包，一种是生产时的打包。

不同的打包方式有不同的配置的，两种打包方式，也就是有两种配置，但是这两种配置中有一些公共的配置。

把这些配置区分出来，创建如下的文件，如下：

1.公共的配置

2.开发配置

3.生产配置

4.导入至webpack.config.js并用webpack-merge合并

JavaScript
const { merge } = require('webpack-merge')
//导入三个配置
const config = require("./config/config")
const dev = require("./config/dev")
const pro = require("./config/pro")

//合并三个配置-简化版
// 当运行npm run dev 期望dev.js和config.js生效
// 当运行npm run pro 期望pro.js和config.js生效
//{ development }是执行脚本传入的env的属性
module.exports = function ({ development }) {
    return merge(config, development ? dev : pro)
}

// 合并三个配置-普通版
// module.exports = function (dev) {
// 在webpack.config.js中就可以得到执行脚本传入的env
// console.log(env);//{ WEBPACK_SERVE: true, development: true }
// 这里是对象解构赋值，取哪个属性值写哪个属性名即可
//     let { development } = env
//     if (development) {
//         return merge(config, dev)
//     } else {
//         return merge(config, pro)
//     }
// }

5.在package.json中配置脚本并执行

JSON
  "scripts": {
  ...
    "dev": "webpack serve --env development --config webpack.config.js",
    "pro": "webpack --env production --config webpack.config.js"
    }

Bash
//生产模式
npm run pro
//开发模式
npm run dev

(二) html-webpack-plugin将js引入指定html

1.配置

JavaScript
        // 将js引入指定html插件
        new HtmlWebpackPlugin({
            template: './public/index.html',//相对路径相对于启动nodejs服务器的目录在这里也就是react-webpack
            // template: path.resolve(__dirname, "../", 'public/index.html')//绝对路径
            inject:"body",//把js脚本注入到body结束标签之前
            filename: "index1.html",// 指定打包成功后页面的名字
            title: "htmlwebpackplugin",//用来指定页面的title标题
            favicon: path.resolve(__dirname, "../", "favicon.ico")//配置icon
        }),

2.注意

title: "htmlwebpackplugin"

还需要在页面中title标签位置写如下代码

HTML
<%= htmlWebpackPlugin.options.title %>

inject:"body"

不设inject的话，默认把打包后js插入到了head结束标签之前

2.执行

(三) postcss-loader处理css兼容

postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。

就是这个工具能给我们写的css代码添加一些兼容的前缀

1.相关依赖

JSON
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"postcss-loader": "^7.0.0",
"postcss-preset-env": "^7.7.1"

2.配置

在项目根目录下创建 postcss.config.js 文件

JavaScript
module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                // 兼容IE7以上浏览器
                "ie >= 8",
                // 兼容火狐版本号大于3.5浏览器
                "Firefox >= 3.5",
                // 兼容谷歌版本号大于35浏览器,
                "chrome >= 35"
            ]
        }
    }
}

修改webpack配置

JavaScript
{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
{ test: /\.(sass|scss)$/, use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"] },

3.执行

(四) 配置代理解决跨域(前端处理)

在做网络请求的时候，前端最常见的问题就是跨域，分别可以在前端和后端处理

前端处理

JSONP(需要服务器端支持)

proxy代理(开发模式)

后端处理

cors

1.出现跨域问题

后端

创建服务器：

JavaScript
const express = require("express")
const path = require("path")// 创建 express 实例const app = express();
app.get("/malu",(req,res)=>{
res.send({code:1,data:"你好，我是服务器~"})})
app.listen(3000,()=>{
console.log('服务器启动了，端口是3000');})

依赖：

测试服务器：

前端

写axios代码，向服务器发请求

产生了跨域问题

2.webpack配置代理解决跨域

JavaScript
    devServer: {
        port: 8080,
        client: {
            // 只弹出报错
            overlay: {
                errors: true,
                warnings: false
            }
        },
        // 代理
        proxy: {
            '/api': {//定义一个标记，如以后api开头的请求都走代理的设置
                target: 'http://localhost:3000/',// 目标域名
                // 发送请求头中host会设置成target
                changeOrigin: true,// 改变源到目标域名，允许设置请求头
                pathRewrite: { '^/api': '' }// 重写路径，去除/api部分
                }
            }
        }

(五) ProvidePlugin把某些包放到全局(webpack内置)

1.分析需要原因

如何把某些包放到全局中，此时需要使用ProvidePlugin

2.配置

JavaScript
const { ProvidePlugin } = require("webpack")
    plugins: [
        // 配置ProvidePlugin将某些包如React放到全局中
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js")
        })
    ]

(六) source-map在Debug时显示原始代码位置信息(而非压缩后)

1.分析需要原因

我们可以通过 devtool 来设置增强调试过程，通过设置 devtool 生成source map。

source map 是一个信息文件，里面存储着代码压缩前后的位置信息。

即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试

开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

看一下控制台，如下：

解决方案：在webpack.dev.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致。

2.配置

Source Map 的最佳实践

开发模式下，建议直接把devtool 的值设置为 source-map ,可以直接定位到具体的错误行

生产环境下，建议关闭Source Map 或者将devtool 设置为 hidden-nosources-source-map ,防止源码泄漏，提高网站的安全性

JavaScript
// 使报错行对应的是源代码而非打包后代码
devtool: "source-map"

此时报错的位置和控制台中就保持一样的了，如下：

在生产中，可以不去配置source-map，上线的也是打包后的代码

可以不配置，也可以配置：

或者不配置：

JavaScript
module.exports = {mode:"development",// devtool:"hidden-nosources-source-map"}

(七) 把第三方包抽离出来

1.分析需要原因

现在尝试去打包，如下：

分析之，如下：

可以看一下，之前打包vue，生成的js文件，如下：

2.配置

JavaScript
    entry: {
        // 把react和react-dom分离出去，形成一个chunk
        // 方便后面cdn优化
        chunk: ['react', 'react-dom/client'],
        //app可随便修改，为main.js打包后的文件名
        app: {
            import: path.resolve(__dirname, "../", "src/main.js"),
            // 写的业务代码是依赖第三方包的
            dependOn: "chunk"
        }
    },

3.执行

(七点五) 抽离css(外部样式)

在生产打包时，需要把css抽离出来

此时我们需要用到一个插件，这个插件中带了一个loader

1.依赖

JSON
"mini-css-extract-plugin": "^2.6.1",

2.配置

JavaScript
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    plugins: [
        // 分离css出来单独打包
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css'
        })
    ]

3.执行

(八) 压缩CSS

1.分析需要原因

打包CSS，书写CSS代码如下：

在main.js中引入css，如下：

打包：

2.依赖

JSON
"optimize-css-assets-webpack-plugin": "^6.0.1"

3.配置

JavaScript
// 压缩打包后的css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
    plugins: [
        // 分离css出来单独打包
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css'
        }),
        // 压缩打包后的css--即变成一行
        new OptimizeCssAssetsWebpackPlugin()
    ]

(九) ESLint

1.前提知识

为了统一规范团队代码习惯，降低代码出错风险，eslint已经成为前端项目必备法器。简单来说，写代码必须遵循一定的规范，至于是什么规范，我们可以自己定义。

eslint是用来进行代码检测。也非常重要，在很多公司，都是要求使用eslint的，如果代码写的不符合要求，有可能代码就提交到不到仓库。在很早之前，有一个laoder，叫eslint-loader来校验代码，现在这个laoder已经淘汰了。现在使用的是一个插件，如下：

2.依赖

JavaScript
"eslint": "^8.18.0",
"eslint-webpack-plugin": "^3.1.1"

eslint里面包含了很多的校验规则

eslint-webpack-plugin使用eslint来查找和修复js代码中的问题

eslint-webpack-plugin这个插件不能进行校验，这个插件是把eslint集成到webpack中的。

代码校验是在开发时进行校验的，配置就需要配置到开发环境中

3.配置

JavaScript
const ESLintPlugin = require("eslint-webpack-plugin")

module.exports = {
    mode:"development",
    devServer:{
        port:8080
    },
    plugins:[
        new ESLintPlugin({
            eslintPath:'eslint',
            extensions:['js','jsx','ts','tsx','vue'],
            exclude:['node_modules']
        })
    ]
}

此时打包后报错

上面的插件仅仅是把eslint集成到webpack中，对于eslint的配置文件，还需要单独配置

创建eslint的配置文件，有多种方式

创建一个eslint的配置文件, 如下

JavaScript
module.exports = {
    env: {
        node: true,
        browser: true,
        es6: true,
    },
    // 支持ES6并不代表支持所有ES6新语法，设置为"module" 支持 ECMAScript 模块
    // 解析配置
    parserOptions: {
        sourceType: 'module',
        ecmaFeatures: {
            'jsx': true
        }
    },
    // 个人难以制定大而全的规范
    // 可以借用大公司已成熟方案，再根据项目情况稍加修改
    // 这里我们引用Airbnb
    extends: "airbnb-base",
    // 配置自定义的规则
    rules: {
        // JS文件中不支持console.log()
        // 'no-console': 'warn',
        // "semi": "error",
    },
};

eslint中还有哪些规则呢？

如下：https://www.cnblogs.com/zhenfeng25/p/15567427.html

Plain Text
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
......

如果不想让eslint检测我们的src下面所有的代码

可以创建一个.eslintignore的配置文件，如下：

4.执行

(十) 使用vue脚手架中的eslint

创建vue脚手架创建项目，如下：

弹出vue脚手架中webpack的配置，如下：

五 "鸡肋"系列

(一) 配置路径别名

1.配置

JavaScript
    // 配置路径相关
    resolve: {
        // 别名
        alias: {
            "@": path.resolve(__dirname, "../", "src")
        },
        // 扩展、延长
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }

2.使用

(二) browserslistrc表示当前项目的浏览器兼容情况

browserslistrc文件是为了表示当前项目的浏览器兼容情况，使用方式有三种：

在package.json中设置

设置成独立的配置文件

某些插件需要重新设置browserslist

我们参考Vue项目的环境配置，选择第二种方式，设置成独立的配置文件

Plain Text
1% // 兼容市场上占有率超过1%的浏览器(世界级)
last 2 versions // 兼容浏览器最近的两个版本
not dead // 不支持24个月内没有官方支持或者更新的浏览器
not ie 11 // 不支持ie 11

(三) 配置ProgressPlugin插件(webpack内置)

1.配置

JavaScript
const { ProgressPlugin } = require("webpack")

2.执行