Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the role of webpack-cli in webpack packaging". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the role of webpack-cli in webpack packaging".

Webpack & webpack-cliwebpack Introduction

Webpack is a static modular packaging tool that serves modern JavaScript applications

Packaging bundler:webpack can help us with packaging, so it is a packaging tool

Static static: packages the code into a final static resource (deployed to a static server)

Modular module:webpack supports all kinds of modular development by default, such as ES Module, CommonJS, AMD, etc.

Modern modern: various problems in front-end development give birth to the emergence of webpack

Webpack installation

Npm install webapck webpack-cli-save-dev

Webpack starts with version 4. 0, and these two things must be installed at the time of installation.

Webpack is the core of packaging code, and webpack-cli is a tool for running webpack on the command line.

However, webpack-cli is not necessary to package files. Why?

Webpack-cli detailed explanation

Use the npm run build command to parse the role of webpack-cli in code packaging, and wk.config.js is a custom webpack configuration file

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

When npm run build is executed on the command line, the webpack executable under node_modules/.bin is executed

There are three executable files that correspond to different platforms

# unix system defaults to the executable file. You must enter the full file name, the default executable file in webpack# windows cmd, the executable file in webpack.cmd# windows PowerShell, and cross-platform webpack.ps1.

Take the contents of the webpack executable file as an example:

#! / 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

As you can see from the code, the webpack.js in the node_modules/webpack/bin/ directory is executed, and the main code for this file is as follows:

/ / this function is used to execute commands, for example, to download the required package const runCommand = (command, args) = > {} / / determine whether the package is installed const isInstalled = packageName = > {} / / this function is used to execute the cli.js file const runCli = cli = > {const path = require ("path") in the bin directory of the webpack-cli package; const pkgPath = require.resolve (`${cli.package} / package.json`) / / pkgPath: d:\ webpack\ node_modules\ webpack-cli\ package.json const pkg = require (pkgPath); / / pkg: configuration in package.json of webpack-cli / / 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.bincli.binName])) } if (! cli.installed) {/ / determine whether webpack-cli is installed / / if not, ask whether to install webpack-cli.} else {runCli (cli);}

The most important function in this file is runCli, which executes the cli.js file in the bin directory in the webpack-cli package, which means that the previous steps are only to find the cli.js file before webpack-cli works.

At the same time, the webpack.js file also makes some auxiliary judgment, first check whether you have installed webpack-cli, if not, it will ask you whether to install (or manually install) the package, if you choose not to install, then the program will stop running here.

Then open the 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)

The main function of this file is runCLI, and runCLI comes from bootstrap.js file. Open bootstrap.js file.

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

Note that it is only here that the interface exposed by webpack-cli is really used. Cli.run (args) is used to handle command line parameters, and the args parameter is:

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

Finally, from the whole process above, we can see that webpack-cli is used to process command-line arguments and build compiler objects from the parameters, and then the process of packaging the code.

This also solves the question raised earlier about why webpack-cli is not necessary for file packaging. Since webpack-cli

Just to handle command-line arguments, we can also build our own cli to handle parameters, such as lyx-cli. In third-party frameworks, React and Vue (versions that do not use Vite) also do not use webpack-cli.

Reference

Interviewer: what happens when you run npm run xxx? -Nuggets (juejin.cn)

Command line interface (CLI) | webpack Chinese document (docschina.org)

Thank you for your reading, the above is the content of "what is the role of webpack-cli in webpack packaging". After the study of this article, I believe you have a deeper understanding of what the role of webpack-cli in webpack packaging is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.