webpack

很多前端项目在打包的时候都直接或者间接地使用了webpack，过去那么多年做前端开发，一直使用的Vue和React框架，其实它们也依赖于webpack打包的。可能Vue会越来越多的使用vite打包，因其作者尤雨溪刚发布了vite 2.0，一个类似webpack的工具，相比webpack有很多的优势，这里不对vite做过多的解释，感兴趣的朋友可以去看看官方文档。

作为一个技术开发人员，我觉得有必要搞懂我们正在使用的工具，这样才能更好的使用它们，就拿webpack来说，需要思考下面3个问题，简称3H。

到底webpack是什么？(what)
到底为什么要用webpack？(why)
到底怎么使用webpack？(how)

webpack是什么

webpack是个打包器（bundler），它负责将JavaScript项目进行打包，包括JavaScript文件、样式表文件、html文件、图片文件以及其他各种静态文件，类似的工具还有snowpack、Rollup、Parcel等等。

webpack is a static module bundler for modern JavaScript applications

上面是官方给出的定义，直接翻译就是，webpack是静态模块打包器。比较尴尬的是，翻译完还是看不懂，这很正常。通常一个东西，如果我们只知道它的名字，甚至给出定义，也很难知道它是什么。只有我们知道它产生的原因，以及如何使用，才能弄明白怎么回事。

为什么要用webpack

既然webpack是bundler，所以需要搞清楚，为什么要用bundler？

试想一下最早的web开发模式，使用html和css开发页面布局和样式，然后编写JavaScript实现页面交互逻辑以及页面更新逻辑，最后在html文件中使用<script>标签来引入JavaScript文件。

当项目很大的时候，大量的逻辑使用JavaScript编写，此时我们有两个选择：

将所有的逻辑写在一个JavaScript文件里，以下简称js文件；
将逻辑拆分成小的模块，放在不同的文件里，html文件里使用<script>引用；

此外，项目中也可能会引用大量的外部包，比如jquery、lodash等等。

不管选择上面的哪种方式，都会面临很多的问题：

方法1会导致js文件过大，逻辑很难维护；
方法2会导致代码中过多的<script>标签，试想一下如果一个文件中有几十个<script>标签的情况；
<script>的引入顺序很重要，如果顺序不对，js文件之间的依赖就出问题了；
使用<script>引入外部包的时候，也同样要注意顺序；
大量的修改更新，会导致很多无用的<script> 还留在项目中无法被察觉，也会导致资源的浪费。

如何解决上面的问题，需要更加直观、更加智能的依赖导入和处理工具，bundler由此而生。

怎么使用webpack

当使用Vue或者React的脚手架创建项目的时候，webpack的配置被二次封装，并不能很好的帮助我们理解webpack的工作原理，下面的hello world程序足够简单，能够更好地帮助理解webpack。

step-1. 创建项目

mkdir webpack-demo
cd webpack-demo
npm init -y

step-2. 安装依赖

npm install webpack webpack-cli --save-dev
npm install --save lodash

step-3. 编写代码

目录结构

webpack-demo
 |- webpack.config.js
 |- package.json
 |- /src
   |- index.js
 |- /dist
   |- index.html

webpack.config.js

const path = require('path');

module.exports = {
  target: ['es5'], // 默认打包输出的main.js是es6格式的，为了更好的兼容性，这里改成es5
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

src/index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello webpack</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

step-4. 打包项目

npx webpack --config webpack.config.js

step-5. 测试

使用浏览器打开dist/index.html，看到页面显示Hello webpack。

webpack默认的输出是es6格式的，如果你使用IE浏览器可能无法显示内容，请在webpack.config.js添加target: ['es5'],

声明，以上代码经过测试

玖叶教程网

前端编程开发入门

3H终极奥义之webpack（终极奥义pua）