current position:Home>The role of webpack cli in webpack packaging

The role of webpack cli in webpack packaging

2022-04-29 13:12:54Lyx

01-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 a static 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
 Copy code 

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"
 Copy code 

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

Untitled 1.png

Here are three executables , Corresponding to different platforms

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

With webpack Take the content of executable file as an example :

basedir=$(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]"
  node  "$basedir/../webpack/bin/webpack.js" "[email protected]"
exit $ret
 Copy code 

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 {
 Copy code 

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");
  // Prefer the local installation of `webpack-cli`
  if (importLocal(__filename)) {
process.title = "webpack";
 Copy code 

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 {
  } catch (error) {
module.exports = runCLI;
 Copy code 

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

 Copy code 

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.


  1. Three face interviewer : function npm run xxx What happened when ? - Nuggets (
  2. Command line interface (CLI) | webpack Chinese document (

copyright notice
author[Lyx],Please bring the original link to reprint, thank you.

Random recommended