1.自动生成HTML

我们每次打包资源之后，都需要去修改 HTML 中的引入文件。

文章目录

我们可以借助 html-webpack-plugin 这个插件去实现每次打包后，自动生成 HTML 文件，并且该文件自动引入所有打包后的资源(HTML、CSS)。

npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        // 如果有多个页面需要处理, 则需要 new 多个实例。
        // 或者封装一个函数(读取所有html文件，然后返回)。
        new HtmlWebpackPlugin({
            // 将 script 标签, 添加在 body 标签内
            inject: 'body',

            // 模板文件, 默认是：src/index.
            template: "./src/index.html",

            // 在不设置自定模板的情况下, 它是标题选项
            // 设置自定义模板后, 它就是自定义变量
            title: '管理输出',
        }),
    ],
};

基于以上配置，我们可以在模板文件中使用传递的变量，其语法采用 ejs 模板引擎。

<title>
    <!-- ejs模板语法 -->
    <%= htmlWebpackPlugin.options.title %>
</title>

需要注意的是：该插件与 html-loader 有一些冲突。

在配置 html-loader 后，就不能在 html 中使用该插件传递的变量了。

html-loader：在 html 中可能引入一些图片资源等，将引入的这些图片资源也进行打包，否则在打包之后无法正常访问。

那么我们可以不使用 html-loader 了，使用 ejs 的 require 来进行引用资源。

<img src="<%= require('./images/1.jpg') %>" alt="">

<a href="<%= require('./images/2.jpg') %>">测试</a>

以上被模板引用的资源，还是会被打包进去的。

2.浏览器兼容JS

在一些低版本的浏览器中，可能无法支持一些语法糖，那么这个时候就需要把语法糖还原成旧的语法。

例如：async/await 就需要还原成 Promise 链式调用。

但是如果是一些新的 API，那么就没有办法还原，而是需要使用 core-js 提供的 polyfill 来填补这一功能。

Polyfill（或称为垫片）是一种代码填充技术，用于为旧版本的浏览器或环境提供对新功能的支持。它通过在旧环境中模拟缺失的功能或API来实现兼容性。

npm i core-js babel-loader @babel/core @babel/preset-env
module.exports = {
    module: {
        rules: [
            {
                test: /.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: "usage",
                                    corejs: '3.35.1',
                                    // 需要兼容的浏览器版本
                                    targets: {
                                        ie: "9"
                                    }
                                }
                            ]
                        ]
                    }
                }
            }
        ]
    }
};

3.使用 ESLint + Prettier 校验代码

我们使用 ESlint 主要校验代码，使用 Prettier 规范代码风格。

安装 ESlint 相关的依赖：

npm install eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import -D

安装 Prettier 相关的依赖：

npm install eslint-plugin-prettier eslint-config-prettier --save-dev
npm install prettier --save-dev --save-exact

然后在 webpack 中配置 eslint：

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

module.exports = {
    plugins: [
        new ESLintPlugin({
            // 在打包时自动修复: 可修复的错误.
            fix: true
        }),
    ],
};

然后在根目录新建 .eslintrc.js 文件夹，该文件用于配置 Eslint。

在下面这段配置中，我们采用了 airbnb-base 和 prettier 推荐的规则。

// 导出一个对象，其中包含了 ESLint 的配置信息
module.exports = {
  // 配置要检查的环境，这里指定了代码是在浏览器中执行的
  env: {
    browser: true,
  },
  // 继承 airbnb-base 规则和 prettier 推荐的规则
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  // 添加 prettier 插件
  plugins: ['prettier'],
  // 配置规则
  rules: {
    // 使用 prettier 格式化代码，如果格式有问题，将会报错
    'prettier/prettier': 'error',
    // 允许使用 console，即不会报 no-console 错误
    'no-console': 'off',
    // 我使用了 autoprefixer 这个工具, 但是它明明是开发依赖, 偏报错要让我加到生产依赖，开启该规则就可以消除报错
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
  },
  // 配置解析选项，这里指定使用最新的 ECMAScript 版本和模块类型为 ECMAScript 模块
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
};

然后新建 .prettierrc.js 文件，该文件需要配合 prettier插件 一起使用。

因为我们上面在 eslint 中使用了 prettier 推荐的规则，所以我们可以通过配置 prettier 来格式化我们的代码，以保证团队代码的风格。

module.exports = {
  // 整体使用单引号
  singleQuote: true,
  // 一行最多 100 字符
  printWidth: 100,
　// 使用 4 个空格缩进
　tabWidth: 4,
};

我们可以在新建 .eslintignore 和 .prettierignore 文件，用来指定忽略检查哪些文件。

.DS_Store
node_modules/
build/
dist/
*.log