【Webpack学习笔记】一、基本使用

【Webpack学习笔记】一、基本使用

更新：2021年10月15日23:53:28

参考课程：尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩_bilibili

更新：2021年10月17日02:19:49

参考：【Webpack学习笔记】二、生产环境下的使用_赖念安的博客-CSDN博客

一、Webpack是什么？

Webpack是一个前端资源构建工具，它可以根据项目中的文件之间的依赖关系将项目打包成对应的静态资源。

二、Webpack五大基本概念

1、entry

指示Webpack打包时的入口。

2、output

设置Webpack打包输出文件时的配置，包括输出文件的名字和路径等信息。

3、module

在Webpack打包过程中，需要用到一种叫做loader的工具，loader的配置工作就是在module中进行。

4、plugins

在Webpack打包过程中，除了上面提到的loader，可能还需要用到各种插件，插件的配置工作就是在plugins中进行的。注意虽然loader和plugins都是打包过程中用到的工具，但是它们是不一样的角色。

5、mode

设置打包时的模式，可以设置为 development （开发模式）和 production （生产模式）其中之一。两种模式下的输出结果是不一样的。

除了这几个核心配置项之外，还有其他配置项，比如： devServer 。随着后面的学习，对webpack的配置将会越来越丰富灵活。

三、Webpack基本使用

1、安装Webpack

先全局安装：

$ npm i webpack weback-cli -g

注意上面的 webpack-cli 是 Webpack 的命令行工具，安装之后就可以在全局下多一个 webpack 命令，比如：

$ webpack -v
webpack: 5.58.2
webpack-cli: 4.9.0
webpack-dev-server not installed

注意，全局安装之后，在项目路径下也得运行本地安装命令：

$ npm i webpack weback-cli -D
# 或
$ npm i webpack weback-cli --save-dev

加上 -D 或 --save-dev 参数是为了将webpack作为开发依赖来安装的，webpack中的所有工具都可以看做是开发依赖。

2、项目目录结构

|-project
	|-node_modules	# 本地安装的依赖模块目录
	|-build	# 编译目录，通过webpack打包处理之后所生成的输出目录
	|-src	# 源代码目录，存放我们的源代码文件
		|-index.js	# webpack入口文件
	|-webpack.config.js	# webpack运行配置文件
	|-package.json	# 包信息文件
	|-package-lock.json	# 包信息文件

3、运行指令

开发环境

$ webpack ./src/index.js -o ./build/built.js --mode=development

解释：

• webpack：使用 webpack 命令。
• ./src/index.js：以当前目录下的 src 目录下的 index.js 为入口文件开始编译。
• -o：指定输出文件的路径。
• ./build/bundld.js：将打包的文件输出至当前目录下的 build 目录下，且输出文件名为 built.js。
• --mode=development：以开发模式打包。

经过实际测试，如果在命令行中输入以上命令，则会在当前目录下的 build 目录下生成一个名为 built.js 的目录，且里面生成了一个名为 main.js 的文件，且有如下输出信息：

$ webpack ./src/index.js -o ./build/built.js --mode=development
asset main.js 4.11 KiB [emitted] (name: main)
runtime modules 279 bytes 1 module
./src/index.js 925 bytes [built] [code generated]
./src/data.json 34 bytes [built] [code generated]
webpack 5.58.2 compiled successfully in 202 ms

我目前使用的webpack版本信息如下：

$ webpack -v
webpack: 5.58.2
webpack-cli: 4.9.0
webpack-dev-server not installed

但是我看的教程中的webpack版本是：

webpack: 4.41.6
webpack-cli: 3.3.11

可能是版本差异导致的问题。

于是我先卸载了webpack和webpack-cli：

$ npm uninstall webpack -g
removed 73 packages in 4.038s

$ npm uninstall webpack-cli -g
removed 50 packages in 0.937s

再安装指定的版本：

$ npm i webpack@4.41.6 -g
$ webpack -v
4.41.6

$ npm i webpack-cli@3.3.11 -g
$ webpack-cli -v
3.3.11

此时再次运行上面的打包命令：

$ webpack ./src/index.js -o ./build/built.js --mode=development
Hash: 68a756570c2d4c8a5886
Version: webpack 4.41.6
Time: 138ms
Built at: 2021/10/13 下午8:19:53
   Asset      Size  Chunks             Chunk Names
built.js  5.39 KiB    main  [emitted]  main
Entrypoint main = built.js
[./src/data.json] 36 bytes {main} [built]
[./src/index.js] 925 bytes {main} [built]

发现和预想中一样，在 ./build/ 目录下生成了一个 built.js 的文件，且控制台输出了相应的信息，其中就包括本次打包的唯一Hash值、打包时间、入口文件及其大小、输出文件及其大小，以及其他的一些被引用到的文件（比如上面的 data.json 文件）。

所以不同版本的webpack工具的API可能不同，网络上的一些教程和经验可能不适用。为了和我目前参考的教程保持版本一致，我就暂时使用 4.41.6 版本的webpack吧。

更新：2021年10月13日19:57:50

参考：详解webpack4打包–新手入门（填坑） - 天天向上吧 - 博客园

观察打包后输出的 built.js 文件：

......

/******/ ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./data.json */ \"./src/data.json\");\nvar _data_json__WEBPACK_IMPORTED_MODULE_0___namespace = /*#__PURE__*/__webpack_require__.t(/*! ./data.json */ \"./src/data.json\", 1);\n/*\r\n  index.js: webpack入口起点文件\r\n\r\n  1. 运行指令：\r\n    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development\r\n      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js\r\n      整体打包环境，是开发环境\r\n    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production\r\n      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js\r\n      整体打包环境，是生产环境\r\n\r\n   2. 结论：\r\n    1. webpack能处理js/json资源，不能处理css/img等其他资源\r\n    2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~\r\n    3. 生产环境比开发环境多一个压缩js代码。\r\n*/\r\n// import './index.css';\r\n\r\n\r\nconsole.log(_data_json__WEBPACK_IMPORTED_MODULE_0__);\r\n\r\nfunction add(x, y) {\r\n  return x + y;\r\n}\r\n\r\nconsole.log(add(1, 2));\r\n\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

发现代码最后一部分有一个对象，且该对象的一个键为 "./src/index.js" ，且其值为一个无名的函数对象，该函数里面使用严格模式，且只有一个 eval() 函数。而这个 eval() 函数里的字符语句就是我们在 index.js 中所写代码和注释。

更新：2021年10月13日20:29:39

参考：eval（）函数的特点和作用 - gutianer - 博客园

参考：JavaScript中的 eval() 函数究竟有什么用_Latency の 博客-CSDN博客_eval()函数的作用是什么?

生产环境

$ webpack ./src/index.js -o ./build/built.js --mode=production

相关参数的意义和上面的【开发环境】是一样的，唯一的区别就是 --mode 参数的值为 production。其输出的文件 built.js 也与开发环境下的不同，那就是会被压缩成一行，相应的体积也是更小（由原来开发环境中的的5.39 KiB变为了1.03 KiB）。

$ webpack ./src/index.js -o ./build/built.js --mode=production
Hash: 7ae7596d2589e3650db0
Version: webpack 4.41.6
Time: 576ms
Built at: 2021/10/13 下午8:43:01
   Asset      Size  Chunks             Chunk Names
built.js  1.03 KiB       0  [emitted]  main
Entrypoint main = built.js
[0] ./src/data.json 36 bytes {0} [built]
[1] ./src/index.js 925 bytes {0} [built]

注意事项

• Webpack可以打包 .js 和 .json 资源，引用方法的话可以使用ES6的模块规范。

  在ES6中模块规范中，一个文件就是一个模块。

• 因为浏览器目前不支持ES6的模块规范，所以webpack可以将我们的ES6模块化代码转换成浏览器能识别的模块化代码。

• Webpack不能直接打包 .css 和 一些图片资源。

四、使用Webpack打包其他资源

首先在项目的根目录下新建一个 webpack.config.js 文件。webpack会根据这个文件里的配置信息来对相应的资源进行打包。

注意，该文件内模块化语法应当遵循CommonJS模块规范。所有的构建工具都是基于Node.js执行的，所以如果需要运用模块化开发，则需要遵循CommonJS规范。

而 src 目录下的代码为项目代码，我们可以大胆使用ES6或其他模块化规范，webpack会将其转化为浏览器能识别的模块化规范。

基本结构：

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

// 用CommonJS规范中的module.exports向外暴露一个配置对象
module.exports = {
  // webpack配置
  // 入口起点，用于指示webpack该从哪个文件开始分析打包，可以使用相对路径
  entry: './src/index.js',
  // 输出配置
  output: {
    // 输出文件名，用于指示webpack打包后的文件名称
    filename: 'built.js',
    // 输出路径，用于指示上述输出文件存放在哪个目录下，这里往往会使用一个绝对路径
    // 所以会用到Node.js中的一个核心模块path中的resolve方法，该方法专门用于拼接绝对路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置，用于配置对样式文件或其他文件的打包规则
  module: {
    // rules是一个数组，里面是一个个配置对象，这些不同的配置对象是为了针对不同类型的文件
    // 注意，一个loader配置只能应用于一种类型的文件
    rules: [{
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      // test属性一般是一个正则表达式，用于指示该条规则应用于哪种文件
      test: /.../,
      // use属性用于指示对上述文件使用哪些loader进行处理，
      // 如果只需要一个loader，那可以直接将 use:[xxx] 替换为 loader:'xxx'
      use: []
    }]
  },
  // plugins的配置
  // 这里可以针对图片等资源定义一些打包规则
  plugins: [
    // 详细plugins的配置
  ],
  // 模式，用于指定采用哪种模式打包，这和之前的webpack指令中的 --mode 参数是一样的
  // 注意，两种模式不能同时打开，只能选择其中一种
  mode: 'development', // 开发模式
  // mode: 'production'
}

配置了 webpack.config.js 文件后，就可以直接通过 webpack 命令来执行打包操作，而不必加上上面提到的那些参数。

1、打包样式资源

如果我们在项目中引用了某个样式文件，比如：

<link rel="stylesheet" type="text/css" href="./style.css">

或是ES6中的模块引入：

import './style.css';
import './style.less';

那么就可以在上面提到的 webpack.config.js 的 module 中配置相应规则：

// loader的配置，用于配置对样式文件或其他文件的打包规则
  module: {
    // rules是一个数组，里面是一个个配置对象，这些不同的配置对象是为了针对不同类型的文件
    // 注意，一个loader配置只能应用于一种类型的文件
    rules: [{
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      // test属性一般是一个正则表达式，用于指示该条规则应用于哪种文件
      // 下面的正则表示该条规则是针对文件名为以.css结尾的文件
      test: /\.css$/,
      // use属性用于指示对上述文件使用哪些loader进行处理
      use: [
        // use数组中loader执行顺序：从右到左，从下到上 依次执行
        // 创建style标签，将js中的样式资源插入进行，添加到head中生效
        'style-loader',
        // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
        'css-loader'
      ]
    }, {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        // 将less文件编译成css文件，注意该loader需要下载 less-loader 和 less
        'less-loader'
      ]
    }]
  },

注意，在使用 css-loader 和 style-loader 以及 less-loader 之前，一定要在本地安装相应的开发者依赖：

# 注意，这些都只是开发时需要用到的，所以加上 -D 参数
# 安装css-loader和style-loader用于解析 .css 资源
$ npm i css-loader style-loader -D

# 安装less-loader和less用于解析 .less 资源
$ npm i less-loader lessr -D

运行 webpack 命令之后，就可以在配置文件中指定的输出路径下发现生成了一个 built.js 文件，其中就有转换为字符串格式的样式代码。如果我们在某个网页中引入该 js 文件，检查页面元素就可以发现页面中被插入了相应的 <style> 标签，相应的样式也生效了。

2、打包html资源

上面打包样式资源时是通过在 webpack.config.js 的 module 中配置相应的 loader。而对于html资源，我们则是通过该配置文件中的 plugins 项来设置的。

同样地，要通过插件来打包相应资源的话，我们首先得通过npm下载相应的插件，对于html资源，我们是使用 html-webpack-plugin 这个插件。所以首先应该进行本地开发者安装：

$ npm i html-webpack-plugin -D

与上面的loader不同的是，在使用插件时，我们需要在 webpack.config.js 中引入这个模块并通过里面的构造函数来打包资源：

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
// 通过CommonJS模块语法引入插件，注意下方的HtmlWebpackPlugin是一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置，html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // new HtmlWebpackPlugin()
    
    // 如果需要有结构的HTML文件，则需要向构造函数中传入一个配置对象，
    // 通过设置该对象中的template来指定输出的html文件是以哪个文件为模板
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

如果不指定 HtmlWebpackPlugin() 构造函数中参数，则该插件会默认生成一个只有基础结构的html文件并且往其中插入项目中引入的其他资源。比如项目中用到了某个js文件，则插件就会在上面的基础html文件中插入一个 <script> 标签来引入项目中用到的相对应资源。

而如果在 HtmlWebpackPlugin() 构造函数中的参数中通过 template 属性来指定某个路径下的html模板文件，则该插件就会将对应的模板文件复制到生成的基础文件中并把项目中用到的其他资源插入该html文件。

注意，因为插件会在生成的html文件中自动引入我们所需的资源，所以不要在模板文件中重复引用相应的资源文件。

3、打包图片资源

打包图片资源是通过配置相应的loader来完成的。

第一步就是要在本地安装相应的loader，我们要用到的loader为 url-loader，又因为该loader依赖于 file-loader 所以，需要先下载这两个loader才行：

$ npm i url-loader file-loader -D

注意， url-loader 不能处理html文件中的 <img> 标签中图片资源，因为它是专门用于处理样式文件中的图片url的loader，而如果要处理html文件中的 <img> 标签，我们需要使用专门用于处理这类图片资源的 html-loader ：

$ npm i html-loader -D

html-loader 是负责将 <img> 标签中的图片资源引入进来，从而让 url-loader 能够处理。

默认情况下，每个本地的 <img src="image.png"> 都需要通过 require （require('./image.png')）来进行加载。你可能需要在配置中为图片指定 loader（推荐 file-loader 或 url-loader ）。


参考：html-loader - Webpack中文文档

参考：webpack-contrib/html-loader: HTML Loader

然后是配置 webpack.config.js 中的 module：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        // options配置项可以用于设置具体的打包规则
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

注意点：

• limit：单位为B，写成诸如 8 * 1024 的形式可以更方便地观察，如果原图片的大小小于该值，则打包时，该图片会被直接转化为base64格式的图片以减少向服务器请求的次数。
• esModule：url-loader 和 html-loader 在解析时默认采用的模块化规范不一样，所以需要手动设置该选项为 false 来防止出错。
• 对于被重复引用的图片资源，webpack不会重复打包。

4、打包其他资源

这里指的其他资源就是除了上面提到的样式、html、图片资源以外的资源（比如字体图标文件等）。对于这些资源，我们不需要做特殊的转换处理，只要将原本的文件输出即可。我们是使用 file-loader 这个loader来完成打包的。

使用前需要先下载这个loader（当然，因为前面学习图片资源打包时，下载 url-loader 的同时也下载了 file-loader，所以这里可以不用重复下载了）：

$ npm i file-loader -D

然后在 webpack.config.js 中配置相应的loader：

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: '.src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build');
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 排除css、html、js、less文件之外的其他类型资源
        exclude: /\.(css|html|js|less)$/,
        // 只需要file-loader一个loader
        loader: 'file-loader',
        options: {
          // 设置打包后的文件名称为文件hash值的前十位加上原后缀名
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    // 配置html-webpack-plugin插件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

五、使用devServer

1、准备dev-server

在此前的Webpack配置过程中，每次当我们修改源代码后，如果想要查看修改后的效果，都要手动再运行一下 webpack 命令，这就显得非常麻烦，而 webpack-dev-server 就是解决这个问题的，如果使用 dev-server 来启动项目的话，它就可以自动地监测 src 目录下的代码变动并实时地为我们重新打包编译。我们只需要关注代码编写就可以了。

首先，在使用 dev-server 前，需要下载相应的包：

$ npm i webpack-dev-server -D

使用 dev-server 来启动项目：

$ npx webpack-dev-server

注意这里有一个 npx 命令，有关该命令的详细描述可参考下方链接：

更新：2021年10月15日19:18:12

参考：如何选择开源许可证？ - 阮一峰的网络日志

参考：npm 和 npx 有什么区别？ - 知乎

参考：npx - npm

简单来说，npx 命令就是用来运行本地安装的某个包的。在使用之前需要先全局安装该命令：

$ npm i -g npx

2、配置devServer

同样是在 webpack.config.js 中配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      ...
    ]
  },
  plugins: [
    ...
  ],
  mode: 'development',

// 上面一些重复的配置就不具体写了，和此前的一样    
    
  devServer: {
    // 启动dev-server时，以哪个目录作为服务器的根目录，即项目打包之后的输出路径
    contentBase: resolve(__dirname, 'build'),
    // 设置是否打开gzip压缩
    compress: true,
    // 设置服务器端口，启动后我们可以通过 localhost:3000 来访问我们的项目
    port: 3000,
    // 设置是否在运行 npx webpack-dev-server 后自动打开默认浏览器
    open: true
  }
};

注意，使用 npx webpack-dev-server 来启动项目的话，就不会有任何文件输出到本地目录，也就是说 build 目录下不会有任何文件输出，因为 webpack-dev-server 只会在内存中编译打包，只要不使用 Ctrl + C 或其他命令来停止 webpack-dev-server 的服务，那么他就会一直监测项目源文件的变化并在内存中自动更新打包后的文件。

六、开发环境下的webpack配置总结

以上就是在开发时使用webpack的一些配置，实际开发中，为了方便寻找和管理文件，一般都会对各类的文件进行目录划分，所以这里对之前的目录结构进行重构：

|-project
	|-node_modules	# 本地安装的依赖模块目录
	|-build	# 编译目录，通过webpack打包处理之后所生成的输出目录
	|-src	# 源代码目录，存放我们的源代码文件
		|-js	# 专门用于存放js源文件的目录
			|-index.js	# webpack入口文件
		|-img	# 专门用于存放图片资源的目录
		|-css	# 专门用于存放样式资源的目录
		|-media	# 存放其他媒体文件的目录
		|-index.html	# 首页文件
	|-webpack.config.js	# webpack运行配置文件
	|-package.json	# 包信息文件
	|-package-lock.json	# 包信息文件

实际中可以根据项目的特点进行合理的划分，可以在下面的配置文件中设置相应的输出文件也在相应的同名目录下存放，这样会更加方便管理。

最后对各个部分进行总结：

// webpack.config.js

// resolve用于拼接绝对路径，在配置output和devServer的contentBase时会用到
// 也可以这样引入： const path = require('path');
// 然后这样使用resolve函数：path.resolve()
const {resolve} = require('path');

// 在使用插件之前一定要将其引入，loader则不用特意引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 因为打包工具是基于Node.js的，所以需要使用CommonJS的模块化规范来向外暴露模块
module.exports = {
  // entry指示入口文件，为了项目的目录结构更加清晰，特意在src目录下建了一层js目录存放js文件
  entry: '.src/js/index.js',
  // output用于指示打包输出的路径，如果希望输出的js文件和src中保持一致的目录结构，则要加上相应路径
  output: {
    filename: 'js/built.js',
    // path 用于指示所有输出文件的根目录
    path: resolve(__dirname, 'build')
  },
  // module中用于配置各种loader
  module: {
    // rules 数组中是一个个loader配置对象
    rules: [
      {
        // test 用于匹配当前loader的作用对象，下面的loader就是匹配css文件
        test: /\.css$/,
        // 如果需要使用多个loader，那么就要使用use数组，loader的执行顺序是由后至前
        // 而且在使用相应loader之前要先通过npm下载相应的loader及其依赖
        use: ['style-loader', 'css-loader'],
      },
      {
        // 匹配less文件
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
  			// 匹配图片文件
        test: /\.(png|jpg|gif)$/,
  			// 如果只使用一个loader，那么就直接用loader属性指明
        loader: 'url-loader',
  			// options用于设置打包时的额外配置
        options: {
          // 如果当前图片的大小小于8KB，那么打包时就会将该图片转化为base64格式
          limit: 8 * 1024,
  				// 可以通过name来设置打包输出的图片的名称格式，
  				// 下面的意思是取图片hash值的前十位，并保持原来的扩展名
          name: '[hash:10].[ext]',
  				// 因为url-loader工作时采用的默认模块化机制是ES6模块，而下面的html-loader
    			// 默认采用的是CommonJS模块机制，为了避免错误，需要手动关闭url-loader的模块化设置
  				// 从而使其采用CommonJS模块规范
          esModule: false,
  				// 为了使输出的图片资源所在目录与src下的保持一致，可以设置outputPath属性为相应值
          outputPath: 'img'
        }
      },
      {
        // 匹配html文件，html-loader是专门用于处理html文件中的<img>标签中的图片资源的，
        // 它需要和上面的url-loader配合使用
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 设置针对其他文件资源的loader，注意这里是exclude，而不是test
        exclude: /\.(html|js|css|less|png|jpg|gif)$/,
        // file-loader会将资源以原本的形式输出，而上面提到的url-loader依赖于此，
        // url-loader是在file-loader的基础上做了一些优化，比如上面limit设置
        loader: 'file-loader',
        options: {
          // 同样为了保持输出目录与原来的目录保持一致，可以设置outputPath为相应的值
          outputPath: 'media'
        }
      }
    ]
  },
  // 在plugins中配置需要用到的插件
  plugins: [
    // 使用之前引入的构造函数并传入一个配置对象
    new HtmlWebpackPlugin({
      // template用于指示输出的html文件以谁为模板，webpack打包时会将项目中用到js资源插入其中
      template: './src/index.html'
    })
  ],
  // 设置打包时的模式，可以设置为development（开发模式）和production（生产模式）其中之一
  mode: 'development',
  // 配置webpack-dev-server，用于自动监测源文件的变动并实时在内存中更新（不输出文件）
  devServer: {
    // 设置服务器的根目录
    contentBase: resolve(__dirname, 'build'),
    // 设置是否开启gzip压缩
    compress: true,
    // 这是服务的端口
    port: 3000,
    // 设置是否自动打开默认浏览器来查看项目打包效果
    open: true
  }
}

结束：2021年10月15日23:24:38