超详细的webpack之开始体验吧

webpack是一个前端工程化非常重要静态模块化打包工具，可以帮我们把 less、sass、esmodule、commonjs 等模块依赖处理成浏览器可识别的静态资源。

虽然webpack非常好用，但它可配置项和语法非常的多，还是比较难理解和掌握的，让我们从最基础的开始，一步步体验吧~

不使用webpack时

浏览器可以识别部分js代码，即使没有webpack，我们代码也是能够运行在浏览器端的。

使用esmodule来做一个演示，新建一个 demo 文件夹，demo 文件夹内新建 src 文件夹和 index.html 文件，src 文件夹里有 util 文件夹和 index.js 文件，util 文件夹中新增 math.js 文件，项目结构如下

demo
├─ src
│     ├─ util
│     │    └─ math.js
│     ├─ index.js
└─ index.html

在math.js中使用模块化导出方法，index.js中导入，并在index.html中通过script标签引入index.js，注意这里的script标签要增加type="module"，表示模块化

// math.js
function add(a, b) {
  return a + b;
}
function sub(a, b) {
  return a - b;
}
export { add, sub };

// index.js
import { add, sub } from "./utils/math.js";
console.log(add(20, 30));
console.log(sub(20, 30));

// index.html
<script src="./src/index.js" type="module"></script>

说明esmodule是可以被浏览器识别的，但如果我们只修改导入导出方式，改为commonjs时，浏览器就不能识别了

// math.js
- export { add, sub };
+ module.exports = {
+  add,
+  sub,
+ };

// index.js
- import { add, sub } from "./utils/math.js";
+ const { add, sub } = require("./utils/math.js");

浏览器是不能识别commonjs语法的，所以会报错

也就是说浏览器对于某些特定的语法并不支持，虽然可以选择commonjs用于浏览器端的一些方案，但通过单一的方式解决了这个问题，仍可能存在其它语法的解析问题，为了处理所有语法兼容问题，使用一种通用的解决方式，webpack来统一处理浏览器对于某些语法不能解析的问题~

使用webpack

首先要全局安装webpack和webpack-cli

npm i webpack webpack-cli -g

webpack 会对我们编写的代码进行编译，下面表示已经编译了 index.js 和 math.js 文件，虽然有“warning”警告，但仍然是编译成功了的。

可在上面的代码中我们并没有告知webpack该对哪个文件进行编译，以及最终编译到哪个文件夹中，怎么就能直接编译成功呢？

其实它自身是有默认的编译规则的，将 src 文件夹下的 index.js 文件，以及index.js文件所用到的其它js文件的代码编译至 dist 文件夹下的 main.js 文件。

我们在index.html中引入main.js文件看到编译后的结果啦~ 和上面使用 esmodule 导出的打印结果是一致的

初始化

要进一步体验webpack，需要依赖于node，在刚刚的demo文件夹根目录通过 npm init -y 初始化node项目，生成 package.json 文件。

在项目中再安装 webpack 和 webpack-cli，与全局版本 5.70.0 做区分，我们指定安装 5.60.0 版本 npm i webpack@5.60.0 -D

全局和项目中安装了 webpack 的情况下，直接执行 webpack 来看看使用的是哪个版本。

仍然使用的是全局的 webpack 版本，当项目与全局webpack版本不一致时，可能会出现一些问题，那我们可以通过以下方式获取到项目中webpack版本。

• 直接找到项目 node_modules 目录下 .bin 文件夹的 webpack 指令 ./node_modules/.bin/webpack
• 使用npx指令来执行 node_modules 下的命令 npx webpack

• 在package.json里的"script"中定义指令

  "script": {
      "build": "webpack"
  }   

  然后通过 npm run build来执行

先在项目中通过 npm i webpack-cli -D 安装 webpack-cli ，然后就可以通过以上任意一种方式执行项目中的webpack

命令行

webpack 对文件进行编译时默认查找有两条规则，如果都不符合，将无法编译成功

• 查找 src 文件夹下的 index.js 文件
• 执行 webpack.config.js 文件

将 index.js 文件名改为 main.js 后，编译就报错了

有时候我们的项目结构不一定能和webpack默认编译的规则保持一致，这时候可以通过命令行自定义编译规则

比如指定导入路径 --entry 文件名 ，指定导出文件夹 --output-path 文件名

也可以定义在 package.json 中

"script": {
   “build”:“webpack --entry ./src/main.js --output-path ./build”
}

然后通过 npm run build来执行

我们可能会有很多处规则需要自定义，包括解析模块的入口，出口，以及其它资源解析方式，如果通过命令行或者package.json，可读性会很差，所以我们通过一个单独的js文件来定义。

webpack.config.js

定义webpack.config.js 文件，指定编译入口为 src 下的 main.js，出口为 dist 文件夹下的 bundle.js，再通过 module.exports 将定义的配置导出。

这里有两点需要注意

• webpack是在node环境下解析的，所以需要通过 commonjs 的导出方式
• 编译入口可以使用相对路径，但出口需要使用绝对路径，通过 _diname 获取当前文件所在的目录的绝对路径

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "./bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
};

配置完成后就可以直接通过 npx webpack 来编译啦

这里也可以修改配置文件的名称，比如修改成 wk.config.js，也是可以通过 命令行 npx webpack --config wk.config.js 或者 package.json 中配置 build 规则来执行

依赖图

webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件，从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块 （比如.js文件、css文件、图片、 字体等），然后遍历图结构，打包一个个模块。

以上我们对webpack进行了初体验，后面还有很多的配置规则，loader、plugin、source-map等等，持续更新中~