webpack学习笔记（基于webpack4.19.1）

基本环境配置

• node 版本 8.0+，测试使用的 node 版本为 12.18.3。

webpack的安装

1. 项目安装，通过命令 npx webpack 执行打包。

npm install webpack@4.19.1 webpack-cli@3.1.2  -D

2. 全局安装，直接使用命令 webpack 执行打包。

npm install webpack@4.19.1 webpack-cli@3.1.2  -D

webpack的基本打包配置

需要在项目目录创建一个 webpack.config.js 的文件，写入以下内容：

1. entry：webpack 入口配置。

2. output：webpack 打包输出配置。

3. module：loader 相关配置，指示不同文件使用不同的 loader 处理。

4. plugins：插件相关配置。

5. mode：设置webpack的打包环境，可选值有production（生产环境）、development（开发环境）、none。

const path = require('path')

module.exports = {

  entry: path.resolve(__dirname, 'index.js'), // webpack 打包入口配置

  output: {// webpack 打包输出配置

    // 输出的文件名

    filename: 'index.js',

    // 输出的路径

    path: path.resolve(__dirname, 'dist')

  },

  module: { // loader 相关配置

    rules:[]

  },

  plugins: [], // 插件相关配置

  mode: 'development' // 设置webpack的打包环境，可选值有production（生产环境）、development（开发环境）、none

}

使用loader处理css、less等样式文件

1. 配置 loader 的作用：用来规定哪些文件用哪些 loader 处理，以及 loader 的处理顺序。

2. loader 的处理顺序为从后到前（从右到左）。

3. 如果使用多个 loader，就使用 use 字段配置，只使用一个 loader 时，可以直接使用 loader 字段。

4. 安装 loader 时要注意安装的 loader 版本是否和 webpack 版本兼容，不兼容会报错，打包失败。

// loader 相关配置

module: {

  // loader 的相关规则，用来规定哪些文件用哪些 loader 处理，以及 loader 的处理顺序

  rules:[

    {

      // 匹配到以 .css 为后缀的文件，就使用 style-loader、css-loader 这两个 loader 处理

      /**

      * loader 的处理顺序为从后到前（从右到左）

      * 第一步：匹配到 css 文件，先用 css-loader 处理整合到 js 文件中

      * 第二步：然后使用 style-loader 创建一个 style 标签，将 js 中的样式引入

      */

      test: /\.css$/,

      // 如果使用多个 loader，就使用 use 字段配置，只使用一个 loader 时，可以直接使用 loader 字段

      // use 数组里面使用字符串是简写模式，也可以使用对象作为数组的值（可修改 loader 默认配置）

      // 安装的 loader 包版本为 style-loader@0.23.1、css-loader@2.1.1

      use: ['style-loader', 'css-loader']

    },

    {

      /**

      * 第一步：使用 less-loader 处理，将 less 代码转为 css 代码

      * 第二步：将 css 代码用 css-loader 处理整合到 js 文件中

      * 第三步：使用 style-loader 创建一个 style 标签，将 js 中的样式引入

      */

      test: /\.less$/,

      // 需要安装的包（加上上面两个）以及版本为：less@3.9.0、less-loader@5.0.0

      use: ['style-loader', 'css-loader', 'less-loader']

    },

    {

      /**

      * 第一步：使用 sass-loader 处理，将 scss 代码转为 css 代码

      * 第二步：将 css 代码用 css-loader 处理整合到 js 文件中

      * 第三步：使用 style-loader 创建一个 style 标签，将 js 中的样式引入

      */

      test: /\.scss$/,

      // 需要安装的包（加上上面两个）以及版本为：node-sass@4.14.1、sass-loader@7.1.0

      use: ['style-loader', 'css-loader', 'sass-loader']

    }

  ]

},

使用插件处理html，并自动引入打包的其他资源

1. 可以使用插件 html-webpack-plugin 处理 html，该插件可以自动将打包的其他资源引入。

2. 插件可以配置压缩文档

...

// 用来处理 html 文件，创建 html 模板（html-webpack-plugin@4.5.2）

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

module.exports = {

  ...

  // 插件相关配置

  plugins: [

    // 使用 html-webpack-plugin 处理 html 模板

    // 如果不传递参数，默认会创建一个空的 html 模板，并自动引入打包好的其他文件资源

    new HtmlWebpackPlugin({

      // 以当前路径下的 index.html 文件为模板创建一个html文件，并自动引入打包文件

      template: path.resolve(__dirname, 'index.html'),

      // 声明创建的 html 模板文件名

      filename: 'index.html',

      // 压缩 html 模板的配置

      minify: {

        // 是否删除多余的 html 属性引号

        removeAttributeQuotes: true,

        // 是否删除空格、换行

        collapseWhitespace: true,

        // 是否删除注释

        removeComments: true

      }

    })

  ],

  ...

}

使用loader处理图片资源以及其他文件

• 变量名说明

  • [name]：源文件的名字

  • [hash]：打包时 webpack 为文件生成的 hash 值

  • [hash:10]：表示取 hash 值的前 10 位

  • [chunckhash]：文件 chunck 的 hash 值，在同一个文件引入的其他文件，生成的 chunckhash 值一样

  • [contenthash]：根据文件内容生成的 hash 值

  • [ext]：源文件的后缀

使用loader处理图片资源

rules:[

  {

    // 匹配以 .png、.jpg、.jpeg、.gif、.svg 为后缀的文件

    test: /\.(png|jpe?g|gif|svg)$/i,

    // 表示使用 url-loader 处理文件（url-loader依赖file-loader），可以对图片进行压缩等其他处理

    // 需要安装的包以及版本：url-loader@1.1.2、file-loader@3.0.1

    // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。

    loader: 'url-loader',

    // loader 的相关配置

    options: {

      // 当文件小于 10KB 时，就会被 base64 处理，可以减少请求服务端的次数

      limit: 10 * 1024,

      // 打包输出的文件名

      /**

      * [name]：原文件的名字

      * [hash]：打包时 webpack 为文件生成的 hash 值

      * [hash:10]：表示取 hash 值的前 10 位

      * [chunckhash]：文件 chunck 的 hash 值，在同一个文件引入的其他文件，生成的 chunckhash 值一样

      * [contenthash]：根据文件内容生成的 hash 值

      * [ext]：源文件的后缀

      */

      name: '[name]-[contenthash:10].[ext]',

      // 打包输出的文件路径

      outputPath: 'image',

      // 不使用 es6 模块化解析，解决图片路径变成[object module]的问题，因为 html-loader 引入的图片是 commonjs

      esModule: false

    }

  },

  {

    // 处理 html 中的图片资源

    test: /\.html$/i,

    // 上一个配置不会处理 html 中的图片文件，使用 html-loader 引入图片资源，交给 url-loader 处理

    // 需要安装的包以及版本：html-loader@1.1.0

    loader: 'html-loader'

  }

]

使用 loader 处理其他资源

rules:[

  {

    // 处理字体文件

    test: /\.(woff2?|eot|ttf|otf)$/i,

    use: {

      // 需要安装的包以及版本：url-loader@1.1.2、file-loader@3.0.1

      // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。

      loader: 'url-loader',

      options: {

        // 当文件小于 10KB 时，就会被 base64 处理，可以减少请求服务端的次数

        limit: 10 * 1024,

        // 打包输出的文件名

        name: '[name]-[contenthash:10].[ext]',

        // 打包输出的文件路径

        outputPath: 'font',

        // 不使用 es6 模块化解析，解决文件路径变成[object module]的问题

        esModule: false

      },

    }

  },

  {

    // 处理其他文件(排除下列文件都使用 file-loader 处理)

    exclude: /\.(css|js|html|less|scss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i,

    // 需要安装的包以及版本：file-loader@3.0.1

    // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。

    loader: 'file-loader',

    options: {

      // 打包输出的文件名

      name: '[name]-[contenthash:10].[ext]',

      // 打包输出的文件路径

      outputPath: 'order',

    }

  }

]

清空输出目录的旧文件

// 用来清空打包目录下的所有文件和目录

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {

  ...

  // 插件相关配置

  plugins: [

    ...

    // 用来清空打包目录下的所有文件和目录

    new CleanWebpackPlugin()

  ],

  ...

}

使用webpack-dev-server实现自动运行打包编译和页面热更新

...

module.exports = {

  ...

  // 开发服务器 devServer：用来自动构建（自动打包、自动启动浏览器、热更新、解决跨域等问题）

  // 需要安装的包以及版本：webpack-dev-server@3.11.2

  // 运行指令：npx webpack-dev-server

  devServer: {

    // 是否自动启动浏览器

    open: true,

    // 是否启用 gzip 压缩

    compress: true,

    // 服务器运行的端口号

    port: 3000

  }

}

处理css样式（配置css兼容、输出为文件、压缩）

1. 引入的css在打包过程中使用了 style-loader，会将 css 样式放到 style 标签中，如果想将样式提取为css文件需要额外安装插件（mini-css-extract-plugin@0.9.0）处理。

2. 打包生成的css代码会存在很多的空格换行还有注释等，为了减少打包后文件的体积需要安装额外的插件（optimize-css-assets-webpack-plugin@5.0.4）进行压缩。

3. 不同浏览器下 css 的属性书写可能有差异，可以使用loader（postcss-loader@4.3.0）处理 css 的浏览器兼容性问题。安装 postcss-loader@4.3.0 时还需要安装依赖插件 postcss-preset-env@6.7.0 读取 package.json，获取里面的 browserslist 属性值作为需要兼容的浏览器版本配置。

"browserslist": [

  ">0.2%", // 表示至少兼容 99.8% 的浏览器

  "not op_mini all", // 不需要兼容所有欧朋mini浏览器

  "last 2 versions", // 需要兼容所有浏览器的最新两个版本

  "not ie <= 8" // 不需要兼容 ie8 一下版本的浏览器

]

webpack.config.js

// 用来处理 css 样式，提取为单独文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 用来压缩打包后的 css，去掉多余的空格、注释等

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {

  ...

  module: {

    // loader 的相关规则，用来规定哪些文件用哪些 loader 处理，以及 loader 的处理顺序

    rules:[

      {

        ...

        test: /\.less$/i,

        use: [{

          // MiniCssExtractPlugin.loader 用来将 css 样式提取为单独文件

          loader: MiniCssExtractPlugin.loader,

          options: {

            // 由于css样式中引用了其他资源，需要配置其他资源的相对路径

            publicPath: '../'

          }

        }, 'css-loader', {

          // 使用 postcss-loader 处理样式兼容性问题

          /**

          * 安装的包以及版本为：postcss-loader@4.3.0、postcss-preset-env@6.7.0

          * 其中依赖插件 postcss-preset-env 是用来获取 package.json 里 browserslist 的配置的，browserslist 的配置如下

              "browserslist": [

                  ">0.2%", // 表示至少兼容 99.8% 的浏览器

                  "not op_mini all", // 不需要兼容所有欧朋mini浏览器

                  "last 2 versions", // 需要兼容所有浏览器的最新两个版本

                  "not ie <= 8" // 不需要兼容 ie8 一下版本的浏览器

                ],

          */

          // 注意该 loader 要在 less-loader 之后使用， css-loader 之前使用

          loader: 'postcss-loader',

          options: {

            // 修改 postcss-loader 的配置

            postcssOptions: {

              // 使用插件 postcss-preset-env 读取 package.json，获取里面的 browserslist 属性值作为需要兼容的浏览器版本配置

              plugins: [['postcss-preset-env']]

            }

          }

        }, 'less-loader']

      },

    ]

  },

  // 插件相关配置

  plugins: [

    ...

    // 用来处理 css 样式，提取为单独文件（还需要在 loader 中配置）

    // 安装的包以及版本为：mini-css-extract-plugin@0.9.0

    new MiniCssExtractPlugin({

      // 对生成的css文件进行重命名

      filename: 'css/[contenthash:10].css'

    }),

    // 用来压缩打包后的 css，去掉多余的空格、注释等

    new OptimizeCssAssetsWebpackPlugin()

  ],

  ...

}

配置eslint代码检查

// eslint 代码检测

const EslintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {

  ...

  // 插件相关配置

  plugins: [

    // eslint 代码检查

    // 需要安装的包以及配置：eslint@8.4.1、eslint-config-airbnb-base@15.0.0、eslint-plugin-import@2.25.3、eslint-webpack-plugin@3.1.1

    /**

    * 包作用说明

    *  eslint-config-airbnb-base：安装 airbnb-base 这种 js 代码规范配置，可以替换为其他的代码规范

    *  eslint-plugin-import：用于读取代码规范配置，会获取 package.json 文件里面的 eslintConfig 配置信息。

          "eslintConfig": {

            "extends": "airbnb-base",

            // eslint 默认不认识 window、navigator 等浏览器的全局变量

            // 需要设置 browser 为 true

            "env": {

              "browser": true // 配置支持浏览器全局变量

            }

          }

    */

    new EslintWebpackPlugin({

      // 是否启用代码自动修复功能，启用会修改源代码，一般不启用

      fix: true

    })

  ],

}

使用babel处理js兼容性问题

由于在写代码的时候经常会用到一些低版本浏览器不兼容的语法，例如 ES6语法，因此需要使用 babel 处理 js 的兼容性问题

...

rules: [

  ...

  {

    // 使用 babel-loader 处理浏览器兼容性问题

    test: /\.js$/i,

    // 排除对 node_modules 目录下的文件的处理

    exclude: /node_modules/,

    // 对 src 目录下的文件进行处理

    // include: /src/,

    /**

    * 如果有多个 loader 要处理 js 文件，可以通过 enforce 字段规定处理顺序，可选值如下：

    * pre：优先执行

    * normal：正常执行

    * inline：其次执行

    * post：最后执行

    */

    enforce: 'pre',

    // 安装的包以及版本：@babel/core@7.16.0、@babel/preset-env@7.16.4、babel-loader@8.2.3、core-js@3.19.3

    /**

    * 包说明：

    *    @babel/core：依赖包

    *    @babel/preset-env：处理基本的 js 语法兼容性问题（箭头函数）、不可以处理高级的语法（promise等）

    *    @core-js：处理高级的 js 语法兼容性问题（如promise、replaceAll等）

    */

    loader: 'babel-loader',

    options: {

      // 预设：指示 babel 做怎样的兼容只处理和使用哪些插件进行处理

      presets: [

        [

          // 处理基本的 js 语法兼容性问题（箭头函数）、不可以处理高级的语法（promise等）

          '@babel/preset-env',

          {

            // 按需加载

            useBuiltIns: 'usage',

            corejs: {

              // 指定 core-js 的版本，要与安装的包的大版本一致

              version: 3

            },

            // 需要达到的目标，必须要兼容的浏览器

            targets: {

              chrome: '60', // 至少要兼容 chrome 60 以上

              firefox: '60',

              ie: '9',

              safari: '10',

              edge: '17'

            }

          }

        ]

      ]

    }

  }

],

...

sourceMap配置错误定位

source-map 是一种提供源代码到构建后代码的映射技术，如果构建后代码出现报错，可以通过映射关系找到报错位置。

• source-map(外部，会生成一个map文件)

  • 功能： 可视化错误代码准确信息和源代码的错误位置。

• inline-source-map(内联，不会额外生成一个map文件，内联在指定输出文件中)

  • 功能：只生成一个内联source-map、可视化错误代码准确信息和源代码的错误位置

• hidden-source-map(外部)

  • 功能：可视化错误代码错误原因，但是没有错误位置

  • 不足：不能追踪源代码错误，只能提示到构建后代码的错误位置

• eval-source-map(内联)

  • 功能：每一个文件都生成对应的 source-map ,都在 eval 中，可视化错误代码准确信息和源代码的错误位置

• nosources-source-map(外部)

  • 功能：可视化错误代码准确信息，但是没有任何源代码信息

• cheap-source-map(外部)

  • 功能：可视化错误代码准确信息和源代码的错误位置

  • 不足：只能精确到行，不能精确到列。

• cheap-module-source-map(外部)

  • 功能：可视化错误代码准确信息和源代码的错误位置。

eval-cheap-module-source-map 是 vue 脚手架构建项目时推荐的配置，在开发模式下是最快的选择。<br />

在生产模式下一般选择隐藏错误信息和报错位置（nosources-source-map）

module.exports = {

  ...

  // 这是 vue 脚手架构建项目时推荐的配置，在开发模式下是最快的选择

  // 在生产模式下一般选择隐藏错误信息和报错位置（nosources-source-map）

  devtool: 'eval-cheap-module-source-map',

  ...

}

附录

配置源码

/**

* webpack 基本配置

*/

const path = require('path')

// 用来处理 html 文件，创建 html 模板（html-webpack-plugin@4.5.2）

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

// 用来清空打包目录下的所有文件和目录

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// 用来处理 css 样式，提取为单独文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 用来压缩打包后的 css，去掉多余的空格、注释等

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// eslint 代码检测

const EslintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {

  // webpack 打包入口配置

  entry: path.resolve(__dirname, './src/main.js'),

  // webpack 打包输出配置

  output: {

    // 输出的文件名

    filename: 'js/index.js',

    // 输出的路径

    path: path.resolve(__dirname, 'dist')

  },

  // source-map 是一种提供源代码到构建后代码的映射技术，如果构建后代码出现报错，可以通过映射关系找到报错位置。

  /**

  * source-map(外部，会生成一个map文件)

  *    功能： 可视化错误代码准确信息和源代码的错误位置。

  * inline-source-map(内联，不会额外生成一个map文件，内联在指定输出文件中)

  *    功能：只生成一个内联source-map、可视化错误代码准确信息和源代码的错误位置

  * hidden-source-map(外部)

  *    功能：可视化错误代码错误原因，但是没有错误位置

  *    不足：不能追踪源代码错误，只能提示到构建后代码的错误位置

  * eval-source-map(内联)

  *    功能：每一个文件都生成对应的 source-map ,都在 eval 中，可视化错误代码准确信息和源代码的错误位置

  * nosources-source-map(外部)

  *    功能：可视化错误代码准确信息，但是没有任何源代码信息

  * cheap-source-map(外部)

  *    功能：可视化错误代码准确信息和源代码的错误位置

  *    不足：只能精确到行，不能精确到列。

  * cheap-module-source-map(外部)

  *    功能：可视化错误代码准确信息和源代码的错误位置

  */

  // 这是 vue 脚手架构建项目时推荐的配置，在开发模式下是最快的选择

  // 在生产模式下一般选择隐藏错误信息和报错位置（nosources-source-map）

  devtool: 'eval-cheap-module-source-map',

  // loader 相关配置

  module: {

    // loader 的相关规则，用来规定哪些文件用哪些 loader 处理，以及 loader 的处理顺序

    rules:[

      {

        // 匹配到以 .css 为后缀的文件，就使用 style-loader、css-loader 这两个 loader 处理

        /**

        * loader 的处理顺序为从后到前（从右到左）

        * 第一步：匹配到 css 文件，先用 css-loader 处理整合到 js 文件中

        * 第二步：然后使用 style-loader 创建一个 style 标签，将 js 中的样式引入

        */

        test: /\.css$/i,

        // 如果使用多个 loader，就使用 use 字段配置，只使用一个 loader 时，可以直接使用 loader 字段

        // use 数组里面使用字符串是简写模式，也可以使用对象作为数组的值（可修改 loader 默认配置）

        // 安装的 loader 包版本为 style-loader@0.23.1、css-loader@2.1.1

        // use: ['style-loader', 'css-loader']

        use: [{

            // MiniCssExtractPlugin.loader 用来将 css 样式提取为单独文件

            loader: MiniCssExtractPlugin.loader,

            options: {

              // 由于css样式中引用了其他资源，需要配置其他资源的相对路径

              publicPath: '../'

            }

          }, 'css-loader', {

            // 使用 postcss-loader 处理样式兼容性问题

            /**

            * 安装的包以及版本为：postcss-loader@4.3.0、postcss-preset-env@6.7.0

            * 其中依赖插件 postcss-preset-env 是用来获取 package.json 里 browserslist 的配置的，browserslist 的配置如下

                "browserslist": [

                    ">0.2%", // 表示至少兼容 99.8% 的浏览器

                    "not op_mini all", // 不需要兼容所有欧朋mini浏览器

                    "last 2 versions", // 需要兼容所有浏览器的最新两个版本

                    "not ie <= 8" // 不需要兼容 ie8 一下版本的浏览器

                  ],

            */

            // 注意该 loader 要在 css-loader 之前使用

            loader: 'postcss-loader',

            options: {

              // 修改 postcss-loader 的配置

              postcssOptions: {

                // 使用插件 postcss-preset-env 读取 package.json，获取里面的 browserslist 属性值作为需要兼容的浏览器版本配置

                plugins: [['postcss-preset-env']]

              }

            }

          }]

      },

      {

        /**

        * 第一步：使用 less-loader 处理，将 less 代码转为 css 代码

        * 第二步：将 css 代码用 css-loader 处理整合到 js 文件中

        * 第三步：使用 style-loader 创建一个 style 标签，将 js 中的样式引入

        */

        test: /\.less$/i,

        // 需要安装的包（加上上面两个）以及版本为：less@3.9.0、less-loader@5.0.0

        // use: ['style-loader', 'css-loader', 'less-loader']

        use: [{

          // MiniCssExtractPlugin.loader 用来将 css 样式提取为单独文件

          loader: MiniCssExtractPlugin.loader,

          options: {

            // 由于css样式中引用了其他资源，需要配置其他资源的相对路径

            publicPath: '../'

          }

        }, 'css-loader', {

          // 使用 postcss-loader 处理样式兼容性问题

          /**

          * 安装的包以及版本为：postcss-loader@4.3.0、postcss-preset-env@6.7.0

          * 其中依赖插件 postcss-preset-env 是用来获取 package.json 里 browserslist 的配置的，browserslist 的配置如下

              "browserslist": [

                  ">0.2%", // 表示至少兼容 99.8% 的浏览器

                  "not op_mini all", // 不需要兼容所有欧朋mini浏览器

                  "last 2 versions", // 需要兼容所有浏览器的最新两个版本

                  "not ie <= 8" // 不需要兼容 ie8 一下版本的浏览器

                ],

          */

          // 注意该 loader 要在 less-loader 之后使用， css-loader 之前使用

          loader: 'postcss-loader',

          options: {

            // 修改 postcss-loader 的配置

            postcssOptions: {

              // 使用插件 postcss-preset-env 读取 package.json，获取里面的 browserslist 属性值作为需要兼容的浏览器版本配置

              plugins: [['postcss-preset-env']]

            }

          }

        }, 'less-loader']

      },

      {

        /**

        * 第一步：使用 sass-loader 处理，将 scss 代码转为 css 代码

        * 第二步：将 css 代码用 css-loader 处理整合到 js 文件中

        * 第三步：使用 style-loader 创建一个 style 标签，将 js 中的样式引入

        */

        test: /\.scss$/i,

        // 需要安装的包（加上上面两个）以及版本为：node-sass@4.14.1、sass-loader@7.1.0

        // use: ['style-loader', 'css-loader', 'sass-loader']

        use: [{

          // MiniCssExtractPlugin.loader 用来将 css 样式提取为单独文件

          loader: MiniCssExtractPlugin.loader,

          options: {

            // 由于css样式中引用了其他资源，需要配置其他资源的相对路径

            publicPath: '../'

          }

        }, 'css-loader', {

          // 使用 postcss-loader 处理样式兼容性问题

          /**

          * 安装的包以及版本为：postcss-loader@4.3.0、postcss-preset-env@6.7.0

          * 其中依赖插件 postcss-preset-env 是用来获取 package.json 里 browserslist 的配置的，browserslist 的配置如下

              "browserslist": [

                  ">0.2%", // 表示至少兼容 99.8% 的浏览器

                  "not op_mini all", // 不需要兼容所有欧朋mini浏览器

                  "last 2 versions", // 需要兼容所有浏览器的最新两个版本

                  "not ie <= 8" // 不需要兼容 ie8 一下版本的浏览器

                ],

          */

          // 注意该 loader 要在 sass-loader 之后使用， css-loader 之前使用

          loader: 'postcss-loader',

          options: {

            // 修改 postcss-loader 的配置

            postcssOptions: {

              // 使用插件 postcss-preset-env 读取 package.json，获取里面的 browserslist 属性值作为需要兼容的浏览器版本配置

              plugins: [['postcss-preset-env']]

            }

          }

        }, 'sass-loader']

      },

      {

        // 匹配以 .png、.jpg、.jpeg、.gif、.svg 为后缀的文件

        test: /\.(png|jpe?g|gif|svg)$/i,

        // 表示使用 url-loader 处理文件（url-loader依赖file-loader），可以对图片进行压缩等其他处理

        // 需要安装的包以及版本：url-loader@1.1.2、file-loader@3.0.1

        // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。

        loader: 'url-loader',

        // loader 的相关配置

        options: {

          // 当文件小于 10KB 时，就会被 base64 处理，可以减少请求服务端的次数

          limit: 10 * 1024,

          // 打包输出的文件名

          /**

          * [name]：原文件的名字

          * [hash]：打包时 webpack 为文件生成的 hash 值

          * [hash:10]：表示取 hash 值的前 10 位

          * [chunckhash]：文件 chunck 的 hash 值，在同一个文件引入的其他文件，生成的 chunckhash 值一样

          * [contenthash]：根据文件内容生成的 hash 值

          * [ext]：源文件的后缀

          */

          name: '[name]-[contenthash:10].[ext]',

          // 打包输出的文件路径

          outputPath: 'image',

          // 不使用 es6 模块化解析，解决图片路径变成[object module]的问题，因为 html-loader 引入的图片是 commonjs

          esModule: false

        }

      },

      {

        // 处理 html 中的图片资源

        test: /\.html$/i,

        // 上一个配置不会处理 html 中的图片文件，使用 html-loader 引入图片资源，交给 url-loader 处理

        // 需要安装的包以及版本：html-loader@1.1.0

        loader: 'html-loader'

      },

      {

        // 处理字体文件

        test: /\.(woff2?|eot|ttf|otf)$/i,

        use: {

          // 需要安装的包以及版本：url-loader@1.1.2、file-loader@3.0.1

          // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。

          loader: 'url-loader',

          options: {

            // 当文件小于 10KB 时，就会被 base64 处理，可以减少请求服务端的次数

            limit: 10 * 1024,

            // 打包输出的文件名

            name: '[name]-[contenthash:10].[ext]',

            // 打包输出的文件路径

            outputPath: 'font',

            // 不使用 es6 模块化解析，解决文件路径变成[object module]的问题

            esModule: false

          },

        }

      },

      {

        // 处理其他文件(排除下列文件都使用 file-loader 处理)

        exclude: /\.(css|js|html|less|scss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i,

        // 需要安装的包以及版本：file-loader@3.0.1

        // 在 file-loader v4.3.0 版本之后默认使用了 esModule 语法，所以会导致文件的路径变成 [object module]。。

        loader: 'file-loader',

        options: {

          // 打包输出的文件名

          name: '[name]-[contenthash:10].[ext]',

          // 打包输出的文件路径

          outputPath: 'order',

        }

      },

      {

        // 使用 babel-loader 处理浏览器兼容性问题

        test: /\.js$/i,

        // 排除对 node_modules 目录下的文件的处理

        exclude: /node_modules/,

        // 对 src 目录下的文件进行处理

        // include: /src/,

        /**

        * 如果有多个 loader 要处理 js 文件，可以通过 enforce 字段规定处理顺序，可选值如下：

        * pre：优先执行

        * normal：正常执行

        * inline：其次执行

        * post：最后执行

        */

        enforce: 'pre',

        // 安装的包以及版本：@babel/core@7.16.0、@babel/preset-env@7.16.4、babel-loader@8.2.3、core-js@3.19.3

        /**

        * 包说明：

        *    @babel/core：依赖包

        *    @babel/preset-env：处理基本的 js 语法兼容性问题（箭头函数）、不可以处理高级的语法（promise等）

        *    @core-js：处理高级的 js 语法兼容性问题（如promise、replaceAll等）

        */

        loader: 'babel-loader',

        options: {

          // 预设：指示 babel 做怎样的兼容只处理和使用哪些插件进行处理

          presets: [

            [

              // 处理基本的 js 语法兼容性问题（箭头函数）、不可以处理高级的语法（promise等）

              '@babel/preset-env',

              {

                // 按需加载

                useBuiltIns: 'usage',

                corejs: {

                  // 指定 core-js 的版本，要与安装的包的大版本一致

                  version: 3

                },

                // 需要达到的目标，必须要兼容的浏览器

                targets: {

                  chrome: '60', // 至少要兼容 chrome 60 以上

                  firefox: '60',

                  ie: '9',

                  safari: '10',

                  edge: '17'

                }

              }

            ]

          ]

        }

      }

    ]

  },

  // 插件相关配置

  plugins: [

    // 使用 html-webpack-plugin 处理 html 模板

    // 如果不传递参数，默认会创建一个空的 html 模板，并自动引入打包好的其他文件资源

    new HtmlWebpackPlugin({

      // 以当前路径下的 index.html 文件为模板创建一个html文件，并自动引入打包文件

      template: path.resolve(__dirname, 'index.html'),

      // 声明创建的 html 模板文件名

      filename: 'index.html',

      // 压缩 html 模板的配置

      minify: {

        // 是否删除多余的 html 属性引号

        removeAttributeQuotes: true,

        // 是否删除空格、换行

        collapseWhitespace: true,

        // 是否删除注释

        removeComments: true

      }

    }),

    // 用来清空打包目录下的所有文件和目录

    // 安装的包以及版本为：clean-webpack-plugin@3.0.0

    new CleanWebpackPlugin(),

    // 用来处理 css 样式，提取为单独文件（还需要在 loader 中配置）

    // 安装的包以及版本为：mini-css-extract-plugin@0.9.0

    new MiniCssExtractPlugin({

      // 对生成的css文件进行重命名

      filename: 'css/[contenthash:10].css'

    }),

    // 用来压缩打包后的 css，去掉多余的空格、注释等

    new OptimizeCssAssetsWebpackPlugin(),

    // eslint 代码检查

    // 需要安装的包以及配置：eslint@8.4.1、eslint-config-airbnb-base@15.0.0、eslint-plugin-import@2.25.3、eslint-webpack-plugin@3.1.1

    /**

    * 包作用说明

    *  eslint-config-airbnb-base：安装 airbnb-base 这种 js 代码规范配置

    *  eslint-plugin-import：用于读取代码规范配置，会获取 package.json 文件里面的 eslintConfig 配置信息。

          "eslintConfig": {

            "extends": "airbnb-base"

          }

    */

    new EslintWebpackPlugin({

      // 是否启用代码自动修复功能，启用会修改源代码，一般不启用

      fix: true

    })

  ],

  // 设置webpack的打包环境，可选值有production（生产环境）、development（开发环境）、none

  mode: 'development',

  // 开发服务器 devServer：用来自动构建（自动打包、自动启动浏览器、热更新、解决跨域等问题）

  // 需要安装的包以及版本：webpack-dev-server@3.11.2

  // 运行指令：npx webpack-dev-server

  devServer: {

    // 是否自动启动浏览器

    open: true,

    // 是否启用 gzip 压缩

    compress: true,

    // 服务器运行的端口号

    port: 3000

  }

}

package.json

{

  "name": "webpack-study",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.16.0",

    "@babel/preset-env": "^7.16.4",

    "babel-loader": "^8.2.3",

    "clean-webpack-plugin": "^3.0.0",

    "core-js": "^3.19.3",

    "css-loader": "^2.1.1",

    "eslint": "^8.4.1",

    "eslint-config-airbnb-base": "^15.0.0",

    "eslint-plugin-import": "^2.25.3",

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

    "file-loader": "^3.0.1",

    "html-loader": "^1.1.0",

    "html-webpack-plugin": "^4.5.2",

    "less": "^3.9.0",

    "less-loader": "^5.0.0",

    "mini-css-extract-plugin": "^0.9.0",

    "node-sass": "^4.14.1",

    "optimize-css-assets-webpack-plugin": "^5.0.4",

    "postcss-loader": "^4.3.0",

    "postcss-preset-env": "^6.7.0",

    "sass-loader": "^7.1.0",

    "style-loader": "^0.23.1",

    "url-loader": "^1.1.2",

    "webpack": "^4.19.1",

    "webpack-cli": "^3.1.2",

    "webpack-dev-server": "^3.11.2"

  },

  "browserslist": [

    ">0.2%",

    "not op_mini all",

    "last 2 versions",

    "not ie <= 8"

  ],

  "eslintConfig": {

    "extends": "airbnb-base",

    "env": {

      "browser": true

    }

  }

}

参考资料

1. （博客文档）实现vue-cli（二）：webpack实现项目打包

2. （视频）尚硅谷最新版Webpack5实战教程(从入门到精通)

3. （技术文档）印记中文webpack文档