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.jsfunction add(a, b) {  return a + b;}function sub(a, b) {  return a - b;}export { add, sub };// index.jsimport { 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等等，继续更新中~