current position:Home>What is the role of webpack cli in webpack packaging

What is the role of webpack cli in webpack packaging

2022-04-29 19:25:51Billion cloud speed

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

    webpack-cli stay webpack What is the role of packaging

    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

    webpack-cli stay webpack What is the role of packaging

    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;  } 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 , 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.


    • Three face interviewer : function npm run xxx What happened when ? - Nuggets (

    • Command line interface (CLI) | webpack Chinese document (

    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 !

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

    Random recommended