webpack-cli stay webpack What is the role of packaging

This article mainly explains “webpack-cli stay webpack What is the role of packaging ”, The explanation in the text is simple and clear , Easy to learn and understand , Next, please follow Xiaobian's ideas and go deeper slowly , Study and learn together “webpack-cli stay webpack What is the role of packaging ” Well ！

webpack & webpack-cli

webpack Introduction

webpack It's a static modular packaging tool , For modern JavaScript Application services

pack bundler：webpack Can help us pack , So it's a packaging tool

Static static： Package the code into the final static resource （ Deploy to static The server ）

modularization module：webpack It supports all kinds of modular development by default ,ES Module、CommonJS、AMD etc.

modern modern： Various problems of front-end development , It gave birth webpack Appearance

webpack install

npm install webapck webpack-cli --save-dev

webpack from 4.0 Version start , At the time of installation , You have to install these two things .

webpack It is the core content of packaging code , and webpack-cli Is a program used to run... On the command line webpack Tools for .

but ,webpack-cli It is not necessary to package files , Why is that ？

webpack-cli Detailed explanation

With npm run build Command to parse webpack-cli Role in code packaging ,wk.config.js For customization webpack The configuration file

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

When executing... On the command line npm run build when , Will execute node_modules/.bin Under the webpack Executable file

Here are three executables , Corresponding to different platforms

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

With webpack Take the content of 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" "[email protected]"  ret=$?else   node  "$basedir/../webpack/bin/webpack.js" "[email protected]"  ret=$?fiexit $ret

You can see that in the code , Will execute node_modules/webpack/bin/ In the catalog webpack.js, The main code of this document is as follows ：

//  This function is used to execute the command , For example, for downloading the required package const runCommand = (command ,args) => {}//  Determine whether the package is installed const isInstalled = packageName => {}//  This function is used to execute webpack-cli In bag bin In the catalog cli.js file 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 Of package.json  Configuration in     // 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) {    //  Judge  webpack-cli  Whether to install     //  If not installed , Ask if you want to install  webpack-cli    ...    ...} else {    runCli(cli);}

The most important function of this file is runCli , This function can execute webpack-cli In bag bin In the catalog cli.js file , In other words, the previous steps are only to find cli.js file , After that ,webpack-cli To work .

meanwhile ,webpack.js The document also makes some auxiliary judgments , First check to see if you have installed webpack-cli, If not installed , You'll be asked if （ Or manual installation ） The package , If you choose not to install , Then the program stops running here .

Then open 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 functions of this file are runCLI, and runCLI 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;

Be careful , It's only here that we really use webpack-cli Exposed interfaces ,cli.run(args) Used to handle command-line parameters , here args Parameter is ：

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

Final , From the whole process above , We can know webpack-cli Is used to handle command line parameters , And constructed by parameters compiler object , Then comes the process of packaging the code .

This also solves the problems raised above , Why? webpack-cli Packaging is not required for files . since webpack-cli

Just to handle command line arguments , Then we can also build our own cli To deal with parameters , such as lyx-cli. In a third-party framework ,React and Vue( not used Vite Version of ) Not used webpack-cli.

Reference

• Three face interviewer ： function npm run xxx What happened when ？ - Nuggets (juejin.cn)

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

Thank you for reading , That's all “webpack-cli stay webpack What is the role of packaging ” Content. , After learning this article , I'm sure you're right webpack-cli stay webpack We have a deeper understanding of the role of packaging , The specific use needs to be verified by practice . This is billion speed cloud , Xiaobian will push you articles with more relevant knowledge points , Welcome to your attention ！