共计 2954 个字符,预计需要花费 8 分钟才能阅读完成。
本篇文章为 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/sh
basedir=$(dirname "$(echo"$0"| sed -e's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [-x "$basedir/node"]; then
"$basedir/node" "$basedir/../webpack/bin/webpack.js" "$@"
ret=$?
else
node "$basedir/../webpack/bin/webpack.js" "$@"
ret=$?
fi
exit $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
- 三面面试官:运行 npm run xxx 的时候产生了什么?
- 命令行接口(CLI)| webpack 中文文档 (docschina.org)