Detailed introduction to webpack command line

Previous words

Webpack provides a command line interface (CLI) to configure and interact with the build process. This is useful for early prototyping, prototyping, writing npm scripts, or some personal customization needs. This article will introduce the command line interface of webpack in detail

Common configuration

【--help】

List all available configuration options on the command line

webpack --help
webpack -h

【--config】

Specify other configuration files. The default configuration file is webpack.config.js. If you want to use other configuration files, you can add this parameter

webpack --config example.config.js

【--progress】

Print out the compilation progress Percentage value

webpack --progress

【--watch】

Observe changes in the file system

webpack --watch
webpack -w

【--colors】

Turn on/off the colors of the console [Default value: (supports-color)]

webpack --colors
webpack --color

【-p】

Compression obfuscation script

webpack -p

【--profile】

Record the compiled performance data and output it. It will tell you which steps in the compilation process take the longest, which is helpful for optimizing the performance of your build

Script

There is a scripts field in the package.json file, which specifies the npm command line abbreviation for running script commands. Therefore, we can make common commands into scripts

//package.json
  "scripts": {"w": "webpack --progress  --colors  --watch","p": "webpack -p","dev":"webpack-dev-server"
  }

When running npm run w, it is equivalent to running webpack --progress --colors --watch, which means running monitoring mode and using colors characters, and displays the percentage of the packaging process

When running npm run p, it is equivalent to running webpack -p, which means compressing the module file

When running npm run dev, it is equivalent to running webpack-dev -server means running a local server

The above is the detailed content of Detailed introduction to webpack command line. For more information, please follow other related articles on the PHP Chinese website!