一、简介

一个常见的 web 应用，可能会包含各种资源，如 html，js，css，图片，字体文件，SVG等。在 webpack 中，这些资源都统一被视为模块，不同模块可以通过对应的 loader 和 plugin 来进行解析和优化，并且最终 webpack 会自动处理模块依赖关系，打包出可以供后台服务器直接伺服的静态资源。

webpack configuration 基础概念，包含以下 5 个部分，接下来分别介绍这个几个概念。不过再了解这些概念之前，我们可以先上手熟悉一些 webpack，这样更有助于对其的理解。
webpack - 图1

二、先上手

2.1. 引子

虽然我们在一些中大型项目中可能已经见过 webpack 的复杂的配置文件了，但是事实上 webpack 它是可以开箱即用的！不过提供的功能太少罢了。首先是安装 webpack

  1. npm i -D webpack webpack-cli

在以上的代码中我们安装了两个包，它们分别是

  • webpack : webpack 的核心包
  • webpack-cli : webpack 命令行接口，我们可以利用它在 bash 中编写命令

在默认情况下，webpack 会假定项目的入口起点 (也就是后面要说到的 entry ) 为src/index.js，并在dist/main.js输出结果； :::warning 试试看 ::: 首先在根目录下创建src/index.js并编写部分测试代码，之后在 bash 中输入以下命令

  1. # --mode指定webpack打包模式，包括development,production和none
  2. ./node_modules/.bin/webpack --mode development

接下来会发现 webpack 自动创建了dist/main.js文件，这个就是打包之后的文件；
虽然这样成功运行了，但是通过命令行--来添加参数的话真的很麻烦。如果想继续扩展，你可以在项目的根目录下创建一个名为webpack.config.js的文件，webpack 会自动使用它；

2.2. 配置文件

从上面的引子中，可以了解到 webpack.config.js 文件，当然它的命名不是固定的，你也可以通过手动设置其他名称的配置文件。如你可以创建一个名为 dev.config.js 的文件，并使用它。

  1. const path = require('path')
  3. module.exports = {
  4.   // 指定模式后，webpack会进行相应的优化
  5.   mode: "development",
  6.   output: {
  7.     // 所有输出文件的绝对目标路径（这里使用的Node.js中内置的path模块）
  8.     path: path.resolve(__dirname, "dist"),
  9.     // 输出bundle文件名
  10.     filename: 'xxxx.bundle.js',
  11.     // 每次构建前清除dist文件夹
  12.     clean: true,
  13.   }
  14. }
  1. ./node_modules/.bin/webpack --config dev.config.js
  2. # 或者如下的方式也可以
  3. npx webpack --config dev.config.js

当你这样执行后，会创建dist/xxxx.bundle.js文件。当然最好的方式是在 package.json 中配置，这样一来，我们就可以通过npm run build来运行你指定的 webpack 命令啦！

  1. "scripts": {
  2.   "build": "webpack --config dev.config.js"
  3. }

快速生成配置文件

在前面的例子中都是手动编写的配置文件，除此之外，我们可以通过npx webpack init来快速初始化配置；当然在这之前需要安装@webpack-cli/generators！

三、基础概念

3.1. mode

:::info mode: 'development' | 'production' | 'none'

  • 默认production
  • 作用 : 告知 webpack 使用相应模式的内置优化 ::: | development | | | —- | —- | | production | | | none | |

使用方法
  • 通过在配置对象中提供mode选项
  • 或在 CLI 中传递参数webpack --mode=development。

如果需要根据webpack.config.js中的 mode 变量更改打包的行为，则必须将配置导出为函数，而不是对象。

  1. var config = {
  2.   entry: './app.js',
  3.   //...
  4. };
  6. module.exports = (env, argv) => {
  7.   if (argv.mode === 'development') {
  8.     config.devtool = 'source-map';
  9.   }
  11.   if (argv.mode === 'production') {
  12.     //...
  13.   }
  15.   return config;
  16. };

3.2. entry

用于指出 webpack 应该从哪个/哪些模块开始进行构建；

  • 默认是 ./src/index.js ，但是可以通过在 webpack.config.js 中进行修改；

    1. module.exports = {
    2. entry: './path/to/my/entry/file.js',
    3. // 多个入口可以像如下方式编写
    4. // entry: {
    5. //   index: './src/index.js',
    6. //   print: './src/print.js',
    7. // },
    8. };

    output

    用于指出 webpack 在哪里输出创建 ( emit ) 的 bundle，以及如何命名；

  • 默认是 ./dist/main.js ，其他生成文件默认放置在 ./dist 中，同样可以在 webpack.config.js 中进行修改； ```typescript const path = require(‘path’);

module.exports = { entry: ‘./path/to/my/entry/file.js’, // 多个入口可以像如下方式编写 // entry: { // index: ‘./src/index.js’, // print: ‘./src/print.js’, // }, output: { path: path.resolve(__dirname, ‘dist’), filename: ‘my-first-webpack.bundle.js’, }, };

  1. :::info
  2. **path 模块**<br />它是 Node.js 核心模块，用于操作文件路径
  3. :::
  4. <a name="g4sat"></a>
  5. ### plugin
  6. loader 只是用来转换文件的，而插件的功能更广。<br />如 html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。
  7. <a name="efQm4"></a>
  8. ### loader
  9. plain webpack 只能理解 javaScript 和 JSON 文件，那 loader 呢它可以让 webpack 能够去处理其他类型的文件，并将这些文件转换成有效模块，以便在构建时添加到依赖图中；
  11. - webpack 可以通过 import 导入任何类型的模块
  12. - loader 有两个属性
  13.    - test 属性，通过正则识别哪些文件会被转换
  14.    - use 属性，定义在转换时，使用哪个 loader 
  15. ```typescript
  16. const path = require('path');
  18. module.exports = {
  19.   output: {
  20.     filename: 'my-first-webpack.bundle.js',
  21.   },
  22.   module: {
  23.     rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  24.   },
  25. };

当 webpack 在 require() 或者 import 语句中解析到 .txt 的路径时，会使用 use 中的加载器进行转换；

四、核心概念

4.1 Module Resolution