1.3.1 Webpack的命令行打包

Webpack的命令行打包是通过在命令行里执行webpack命令来完成的，我们通过一个案例来讲解，配套代码示例是webpack1-1。

在本地新建一个文件夹webpack1-1，在该文件夹下执行以下命令。

该命令会初始化一个项目并使用默认参数创建package.json文件。

接下来本地安装Webpack。

该命令安装了指定版本的webpack与webpack-cli包。这两个npm包的作用如下：webpack包是Webpack核心包；webpack-cli包是命令行工具包，在用命令行执行webpack命令的时候需要安装。详细的安装过程已经在1.2节中进行过讲解，请尽量安装与本书中版本一致的包。

我们要打包的JS文件有两个：a.js和b.js。在b.js文件里定义了一个值是2022的变量year，然后在另一个JS文件a.js里引入b.js并把变量内容输出到浏览器控制台上。

项目下的主要文件如下。

a.js文件的内容如下。

b.js文件的内容如下。

HTML文件也很简单，用来引入JS文件，这里我们引入a.js文件。

index.html文件的内容如下。

现在我们在本地直接用浏览器打开index.html，打开浏览器控制台，发现报错了。

浏览器会报错，一方面是因为浏览器对原始的ES6模块默认引入方式不支持，另一方面是因为本地JS文件调用外部模块存在安全问题。

这是我们需要解决的问题。

现在，我们尝试用Webpack把这两个文件打包成一个JS文件来解决这个问题。通过Webpack打包成一个文件后，ES6模块语法就被消除了。

执行如下命令，该命令是Webpack 5的命令行打包命令。

上面命令的作用：从a.js文件开始，按照模块引入的顺序把所有代码打包到一个JS文件里，这个文件的默认名称是main.js。Webpack会自动处理打包后代码的顺序与依赖关系。--entry用来指定打包入口文件，-o是out的意思，表示输出目录，这里使用dist目录作为打包后的输出目录。注意，webpack是打包命令，后面的内容是打包参数。

现在我们在HTML文件里引入dist目录下的main.js文件，打开浏览器控制台，发现可以正常输出数字2022了。

上面就是一个最简单的Webpack打包过程，我们观察打包后的main.js文件，其代码如下。