一、webpack是什么？

官方对webpack的解释是用于编译 JavaScript 模块。通俗来说就是：找出模块之间的依赖关系，按照一定的规则把这些模块组织、合并为一个 JavaScript 文件。

webpack认为一切都是模块，包括 JS 文件、 CSS 文件以及图片等资源，都是模块。webpack的本质工作就是将这些所有模块合并为一个 JS 文件，此外我们也可以通过一个规则或工具改变webpack打包的方式，以改变最终打包生成的文件。后面会学习一些规则和工具来改变和扩展webpack的工作。

二、安装webpack

2.1 安装 Node.JS

使用webpack需要先安装Node.js，需要安装Node.js高于10.13.0的版本。

2.2 安装webpack

这里选择本地安装，首先新建个npm项目，然后在项目根目录执行：

npm i webpack webpack-cli --save-dev

上面的命令会安装最新版本的 webpack 和 webpack-cli，因为自 webpack4 开始，webpack将webpack-cli分离开了，需要单独安装。

然后配置 package.json 文件的 scripts字段：

"scripts": {
    "dev": "webpack"
  },

三、尝试webpack

3.1 ES6 module 存在的问题

在新建的 npm 项目新建 a.js、b.js、index.html，目前项目目录文件组织如下：

各文件内容如下：

a.js

import { year } from './b.js'
console.log(year);

b.js

export var year = 2023;

index.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>
    <script src="a.js"></script>
</head>
<body>
</body>
</html>

然后我们打开 index.html 之后会发现控制台报错：

这是因为浏览器默认会将 module 的模块语法当做普通 js 引入，我们需要给 script 标签指定type="module" 属性，这样浏览器才会将其作为 module 模块导入，像下面这样修改 index.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>
    <script type="module" src="a.js"></script>
</head>
<body>
</body>
</html>

没有报错：

3.2 尝试webpack打包

针对 ES6 module 模块化语法存在的问题，我们在上面通过给 script 标签添加type="module" 属性解决了该问题，下面我们通过webpack命令行打包解决这个问题。

首先，我们在项目根目录新建webpack.config.js文件：

并写入以下内容：

var path = require ('path');
 module.exports = {
    entry: './a.js',
    output: {
        path: path.resolve(__dirname, ''),
        filename: 'bundle.js'
    },
    mode: 'none'
 };

在上面的文件中，我们将a.js作为入口文件开始打包，将打包后的资源输出到当前目录下的bundle.js文件中。通俗点说就是将 a.js 文件和其依赖的 b.js 文件打包合并成一个新文件 bundle.js。文件中配置项具体作用后面会有文章深入讲解，这里只需要知道我们做了什么即可。

最后，我们将 index.html 文件中的 script 标签内的文件换成 bundle.js 即可：

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

最终结果依旧正常输出到控制台：

四、总结

本文主要介绍了以下几点内容：

webpack是什么，做什么的：Webpack是一个开源的 JavaScript 模块打包工具，主要用来将多个JavaScript文件和其他资源（如 CSS、图片、字体等）捆绑在一起，以便在浏览器中加载，Webpack的主要目的是优化前端开发的资源管理和加载速度。
尝试了webpack的打包流程。

本文引用了以下书籍或文章：

《Webpack与Babel入门详解》

Webpack入门：一、初识Webpack