likes
comments
collection
share

走近Webpack

作者站长头像
站长
· 阅读数 5

为什么需要webpack？

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

<!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>

浏览器打开，显示结果： 走近Webpack

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

  1. parent.js，用于给parent加上 宽、高 、边框
  2. createChild.js, 用于创建child
  3. setChildColor.js, 用于设置字体颜色
  4. setChildBorder.js 用于设置边框
// parent.js
const addParentStyle = () => {
  const dom = document.getElementById('parent');
  dom.style.width = '100px';
  dom.style.height = '100px';
  dom.style.border = "1px solid black";
}
​
addParentStyle();

// 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();

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

insertContent2();


// 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一样的操作，设置颜色和边框

<!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重写上面例子，看看有什么不一样

准备工作

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

$ node -v
v16.16.0

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

初始化webpack项目

项目结构
走近Webpack
初始化目录webpack-demo，安装webpack

$ 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配置文件
// webpack.config.js
const path = require('path');
​
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  }
}
增加webapck打包命令： "build": "webpack"
# 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

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>
<!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>
执行打包命令
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

尾声

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

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

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

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

PS：世界这么大，何时才能躺平┑(￣。。￣)┍\color{blue}{PS：世界这么大，何时才能躺平 ┑(￣。。￣)┍}PS：世界这么大，何时才能躺平┑(￣。。￣)┍

转载自:https://juejin.cn/post/7304531564368953355
评论
请登录