likes
comments
collection
share

走近Webpack

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

为什么需要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.jssetChildColor.jssetChildBorder.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.jssetChildBorder.js只能改成insertContent2insertContent3

  • 一个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.jscreateChild.jssetChildColor.jssetChildBorder.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.jscreateChild.jssetChildColor.jssetChildBorder.js,引入顺序是打乱的
  • createChild.jssetChildColor.jssetChildBorder.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
评论
请登录