走近Webpack

为什么需要webpack？

在回答这个问题之前，我们先看个例子

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent">parent</div>
  <script src="./parent.js"></script>
  <script src="./createChild.js"></script>
  <script src="./setChildColor.js"></script>
  <script src="./setChildBorder.js"></script>
</body>
</html>

浏览器打开，显示结果：

这个例子很简单，先有一个div，叫parent，后面又生成了一个div，叫child

parent.js，用于给parent加上宽、高、边框
createChild.js, 用于创建child
setChildColor.js, 用于设置字体颜色
setChildBorder.js 用于设置边框

ini 复制代码

// parent.js
const addParentStyle = () => {
  const dom = document.getElementById('parent');
  dom.style.width = '100px';
  dom.style.height = '100px';
  dom.style.border = "1px solid black";
}

addParentStyle();

js 复制代码

// createChild.js
const insertContent = () => {
  const dom = document.getElementById('parent');
  const child = document.createElement('div');
  child.innerHTML = "child";
  child.setAttribute('id', 'child');
  dom.appendChild(child)
}

insertContent();

js 复制代码

// setChildColor.js
const insertContent2 = () => {
  const dom = document.getElementById('child');
  dom.style.color = "red";
}

insertContent2();

js 复制代码

// setChildBorder.js
const insertContent3 = () => {
  const dom = document.getElementById('child');
  dom.style.border = "1px solid black";
}

insertContent3();

注意，createChild.js与setChildColor.js、setChildBorder.js加载顺序不能错

现在要为child，增加10个子节点，grandson1, grandson2...grandson10，重复跟child一样的操作，设置颜色和边框

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent"></div>
  <script src="./createChild.js"></script>
  <script src="./setChildColor.js"></script>
  <script src="./setChildBorder.js"></script>
  <script src="./createGrandson1.js"></script>
  <script src="./setGrandson1Color.js"></script>
  <script src="./setGrandson1Border.js"></script>
  <script src="./createGrandson2.js"></script>
  <script src="./setGrandson2Color.js"></script>
  <script src="./setGrandson2Border.js"></script>
  // ...
  <script src="./createGrandson10.js"></script>
  <script src="./setGrandson10Color.js"></script>
  <script src="./setGrandson10Border.js"></script>
  
</body>
</html>

这个时候问题来了：

我们需要手动维护js加载顺序
createChild.js一定要在setChildColor.js等之前
文件一多，命名就容易冲突，比如：
createChild.js里有个insertContent方法，setChildColor.js、setChildBorder.js只能改成insertContent2，insertContent3
一个js，就是一次请求，增大网络开销

重写例子（webpack)

现在我们用webpack重写上面例子，看看有什么不一样

准备工作

webpack 是基于node，为了便于开发，再安装一个IDE工具vscode（也可以使用自己熟悉的）

ruby 复制代码

$ node -v
v16.16.0

# node安装，会自带一个包管理器npm
$ npm -v
8.11.0

初始化webpack项目

项目结构

初始化目录webpack-demo，安装webpack

yaml 复制代码

$ mkdir webpack-demo && cd webpack-demo

# 初始化项目
$ npm init -y

# 安装webpack核心包及命令工具
$ npm i webpack webpack-cli

# webpack版本
$ webpack -v
System:
    OS: macOS 12.6
    CPU: (8) x64 Apple M1
    Memory: 25.01 MB / 16.00 GB
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Safari: 15.6.1
  Global Packages:
    webpack-cli: 5.0.1
    webpack: 5.75.0

新建webpack配置文件

lua 复制代码

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  }
}

增加webapck打包命令： `"build": "webpack"`

json 复制代码

# package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

新建`index.js`, 引入`parent.js`、`createChild.js`、`setChildColor.js`、`setChildBorder.js`

js 复制代码

import { insertContent as setChildColor } from './setChildColor';
import { insertContent as setChildBorder } from './setChildBorder';

import { addParentStyle } from './parent';
import { insertContent as createChild }from './createChild';

addParentStyle();
createChild();
setChildColor();
setChildBorder();

新建 `index.html`, 引入`<script src="./dist/bundle.js"></script>`

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent">parent</div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

执行打包命令

js 复制代码

npm run build

浏览器打打开`index.html`

结果与之前例子一样

对比

回头看在webpack例子中的index.js

parent.js、createChild.js、setChildColor.js、setChildBorder.js，引入顺序是打乱的
createChild.js、setChildColor.js、setChildBorder.js，文件中方法名可以重复
减少了js的请求，都打包进了bundle.js文件中

尾声

上面webpack例子，并没有引入css，其实webpack本身也不支持，在不进行额外配置时，自身只支持js及json文件的处理。

要处理非js文件，比如html、css、图片、字体等，就得使用对应的loader，这也是webpack强大之处。

在后面webpack的分享中，我会用简单的例子，来记录我对webpack的理解。

欢迎同样感兴趣的程序猿(媴），在评论区分享自己的理解和总结。

<math xmlns="http://www.w3.org/1998/Math/MathML"> P S ：世界这么大，何时才能躺平┑ ( ￣。。￣ ) ┍ \color{blue}{PS：世界这么大，何时才能躺平 ┑(￣。。￣)┍} </math>PS：世界这么大，何时才能躺平┑(￣。。￣)┍

为什么需要webpack？

重写例子（webpack)

准备工作

初始化webpack项目

项目结构

初始化目录webpack-demo，安装webpack

新建webpack配置文件

增加webapck打包命令： "build": "webpack"

新建index.js, 引入parent.js、createChild.js、setChildColor.js、setChildBorder.js

新建 index.html, 引入<script src="./dist/bundle.js"></script>

执行打包命令

浏览器打打开index.html

对比

尾声

增加webapck打包命令： `"build": "webpack"`

新建`index.js`, 引入`parent.js`、`createChild.js`、`setChildColor.js`、`setChildBorder.js`

新建 `index.html`, 引入`<script src="./dist/bundle.js"></script>`

浏览器打打开`index.html`