本篇文章为webpack系列文章的第一篇，心愿我的一些学习播种也能够帮忙到其它更多的人

webpack Introduction

webpack 是一个动态的模块化打包工具，为古代的JavaScript应用程序服务

打包 bundler：webpack能够帮忙咱们进行打包，所以它是一个打包工具

动态的static：将代码打包成最终的动态资源（部署到动态服务器）

模块化module：webpack默认反对各种模块化开发，ES Module、CommonJS、AMD等

古代modern：前端开发的各种问题，催生了webpack的呈现

webpack 装置

npm install webapck webpack-cli --save-dev

webpack 从 4.0 版本开始，在装置时，就必须要装置这两个货色。

webpack 是打包代码时依赖的核心内容，而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。

但，webpack-cli对于打包文件不是必要的，这是为什么呢？

webpack-cli 详解

以 npm run build 命令来解析 webpack-cli 在代码打包中的作用，wk.config.js 为自定义webpack 配置文件

"scripts": {    "build": "webpack --config wk.config.js" }

当在命令行中执行 npm run build 时，会执行node_modules/.bin下的webpack可执行文件

这里有三个可执行文件，别离对应不同的平台

# unix 零碎默认可执行文件，必须输出残缺文件名webpack# windows cmd 中默认的可执行文件webpack.cmd# windows PowerShell 中可执行文件，能够跨平台webpack.ps1

以webpack可执行文件内容为例：

#!/bin/shbasedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")case `uname` in    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;esacif [ -x "$basedir/node" ]; then  "$basedir/node"  "$basedir/../webpack/bin/webpack.js" "$@"  ret=$?else   node  "$basedir/../webpack/bin/webpack.js" "$@"  ret=$?fiexit $ret

从代码中能够看到，会执行node_modules/webpack/bin/ 目录下的webpack.js，该文件次要代码如下：

// 该函数用于执行命令，例如用于下载须要的包const runCommand = (command ,args) => {}// 判断该包是否装置const isInstalled = packageName => {}// 该函数用于执行webpack-cli包中bin目录下的cli.js文件const runCli = cli => {    const path = require("path");    const pkgPath = require.resolve(`${cli.package}/package.json`);    // pkgPath: D:\webpack\node_modules\webpack-cli\package.json    const pkg = require(pkgPath);    // pkg: webpack-cli的package.json 中的配置    // path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]): D:\webpack\node_modules\webpack-cli\bin\cli.js    require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));}if (!cli.installed) {    // 判断 webpack-cli 是否装置    // 如果没有装置，询问用于是否装置 webpack-cli    ...    ...} else {    runCli(cli);}

该文件最重要的函数就是 runCli ，该函数能够执行 webpack-cli 包中bin目录下的cli.js 文件，也就是说在此之前的步骤只是为了找到cli.js文件，在此之后，webpack-cli 才发挥作用。

同时，webpack.js 文件也做了一些辅助判断，首先查看你是否装置了webpack-cli，如果没有装置，就会询问你是否装置（或手动装置）该包，如果抉择不装置，那么程序运行到这就进行了。

接着关上webpack-cli/bin/cli.js

#!/usr/bin/env node"use strict";const importLocal = require("import-local");const runCLI = require("../lib/bootstrap");if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {  // Prefer the local installation of `webpack-cli`  if (importLocal(__filename)) {    return;  }}process.title = "webpack";runCLI(process.argv);

该文件的次要函数为 runCLI，而 runCLI 又来自 bootstrap.js 文件，关上 bootstrap.js 文件

const WebpackCLI = require("./webpack-cli");const runCLI = async (args) => {  // Create a new instance of the CLI object  const cli = new WebpackCLI();  try {    await cli.run(args);  } catch (error) {    cli.logger.error(error);    process.exit(2);  }};module.exports = runCLI;

留神，到了这里才真正用到了 webpack-cli 暴露出的接口，cli.run(args) 用来解决命令行参数，此时args参数为：

[  'E:\\nodejs\\node.exe',  'D:\\webpack\\node_modules\\webpack\\bin\\webpack.js',  '--config',  'wk.config.js']

最终，从以上整个过程，咱们能够晓得 webpack-cli 是用来解决命令行参数，并通过参数构建 compiler 对象，而后才是对代码进行打包的过程。

这同时也解决了前文提出的问题，为什么webpack-cli对于文件打包不是必须的。既然 webpack-cli

只是为了解决命令行参数，那咱们同样能够构建本人的cli来解决参数，比方 lyx-cli。在第三方框架中，React 和 Vue(未应用Vite的版本)也没有应用 webpack-cli.

Reference

  1. 三面面试官：运行 npm run xxx 的时候产生了什么？
  2. 命令行接口（CLI） | webpack 中文文档 (docschina.org)