关于前端:超详细的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 等等，继续更新中~