ui
This commit is contained in:
+147
@@ -0,0 +1,147 @@
|
||||
<div align="center">
|
||||
<a href="https://github.com/webpack/webpack-cli">
|
||||
<img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
# webpack CLI
|
||||
|
||||
The official CLI of webpack
|
||||
|
||||
## About
|
||||
|
||||
webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. As of webpack v4, webpack is not expecting a configuration file, but often developers want to create a more custom webpack configuration based on their use-cases and needs. webpack CLI addresses these needs by providing a set of tools to improve the setup of custom webpack configuration.
|
||||
|
||||
## How to install
|
||||
|
||||
When you have followed the [Getting Started](https://webpack.js.org/guides/getting-started/) guide of webpack then webpack CLI is already installed!
|
||||
|
||||
Otherwise
|
||||
|
||||
```bash
|
||||
npm install --save-dev webpack-cli
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
yarn add webpack-cli --dev
|
||||
```
|
||||
|
||||
## Supported arguments and commands
|
||||
|
||||
### Usage
|
||||
|
||||
All interactions with webpack-cli are of the form
|
||||
|
||||
```bash
|
||||
npx webpack-cli [command] [options]
|
||||
```
|
||||
|
||||
If no command is specified then `bundle` command is used by default
|
||||
|
||||
### Help Usage
|
||||
|
||||
To display basic commands and arguments -
|
||||
|
||||
```bash
|
||||
npx webpack-cli --help
|
||||
```
|
||||
|
||||
To display all supported commands and arguments -
|
||||
|
||||
```bash
|
||||
npx webpack-cli --help=verbose
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
npx webpack-cli --help verbose
|
||||
```
|
||||
|
||||
### Available Commands
|
||||
|
||||
```
|
||||
build|bundle|b [entries...] [options] Run webpack (default command, can be omitted).
|
||||
configtest|t [config-path] Validate a webpack configuration.
|
||||
help|h [command] [option] Display help for commands and options.
|
||||
info|i [options] Outputs information about your system.
|
||||
init|create|new|c|n [generation-path] [options] Initialize a new webpack project.
|
||||
loader|l [output-path] [options] Scaffold a loader.
|
||||
migrate|m <config-path> [new-config-path] Migrate a configuration to a new version.
|
||||
plugin|p [output-path] [options] Scaffold a plugin.
|
||||
serve|server|s [entries...] [options] Run the webpack dev server.
|
||||
version|v [commands...] Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
|
||||
watch|w [entries...] [options] Run webpack and watch for files changes.
|
||||
```
|
||||
|
||||
### webpack 4
|
||||
|
||||
```
|
||||
Options:
|
||||
--analyze It invokes webpack-bundle-analyzer plugin to get bundle information
|
||||
-c, --config <value...> Provide path to a webpack configuration file e.g. ./webpack.config.js.
|
||||
--config-name <value...> Name of the configuration to use.
|
||||
-m, --merge Merge two or more configurations using 'webpack-merge'.
|
||||
--env <value...> Environment passed to the configuration when it is a function.
|
||||
--node-env <value> Sets process.env.NODE_ENV to the specified value.
|
||||
--progress [value] Print compilation progress during build.
|
||||
-j, --json [value] Prints result as JSON or store it in a file.
|
||||
-d, --devtool <value> Determine source maps to use.
|
||||
--no-devtool Do not generate source maps.
|
||||
--entry <value...> The entry point(s) of your application e.g. ./src/main.js.
|
||||
-h, --hot [value] Enables Hot Module Replacement
|
||||
--no-hot Disables Hot Module Replacement
|
||||
--mode <value> Defines the mode to pass to webpack.
|
||||
--name <value> Name of the configuration. Used when loading multiple configurations.
|
||||
-o, --output-path <value> Output location of the file generated by webpack e.g. ./dist/.
|
||||
--prefetch <value> Prefetch this request
|
||||
--stats [value] It instructs webpack on how to treat the stats e.g. verbose.
|
||||
--no-stats Disable stats output.
|
||||
-t, --target <value...> Sets the build target e.g. node.
|
||||
-w, --watch Watch for files changes.
|
||||
--no-watch Do not watch for file changes.
|
||||
--watch-options-stdin Stop watching when stdin stream has ended.
|
||||
--no-watch-options-stdin Do not stop watching when stdin stream has ended.
|
||||
|
||||
Global options:
|
||||
--color Enable colors on console.
|
||||
--no-color Disable colors on console.
|
||||
-v, --version Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
|
||||
-h, --help [verbose] Display help for commands and options.
|
||||
```
|
||||
|
||||
### webpack 5
|
||||
|
||||
Checkout [`OPTIONS.md`](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md) to see list of all available options.
|
||||
|
||||
## Exit codes and their meanings
|
||||
|
||||
| Exit Code | Description |
|
||||
| --------- | -------------------------------------------------- |
|
||||
| `0` | Success |
|
||||
| `1` | Errors from webpack |
|
||||
| `2` | Configuration/options problem or an internal error |
|
||||
|
||||
## CLI Environment Variables
|
||||
|
||||
| Environment Variable | Description |
|
||||
| ----------------------------------- | ------------------------------------------------------------------- |
|
||||
| `WEBPACK_CLI_SKIP_IMPORT_LOCAL` | when `true` it will skip using the local instance of `webpack-cli`. |
|
||||
| `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG` | when `true` it will force load the ESM config. |
|
||||
| `WEBPACK_PACKAGE` | Use a custom webpack version in CLI. |
|
||||
| `WEBPACK_DEV_SERVER_PACKAGE` | Use a custom webpack-dev-server version in CLI. |
|
||||
| `WEBPACK_CLI_HELP_WIDTH` | Use custom width for help output. |
|
||||
|
||||
## Configuration Environment Variables
|
||||
|
||||
You can use the following environment variables inside your webpack configuration:
|
||||
|
||||
| Environment Variable | Description |
|
||||
| -------------------- | -------------------------------------------- |
|
||||
| `WEBPACK_SERVE` | `true` if `serve\|s` is being used. |
|
||||
| `WEBPACK_BUILD` | `true` if `build\|bundle\|b` is being used. |
|
||||
| `WEBPACK_WATCH` | `true` if `--watch\|watch\|w` is being used. |
|
||||
|
||||
Checkout [webpack.js.org](https://webpack.js.org/api/cli/) for more detailed documentation of `webpack-cli`.
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
#!/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);
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
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;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
const CLI = require("./webpack-cli");
|
||||
|
||||
module.exports = CLI;
|
||||
// TODO remove after drop `@webpack-cli/migrate`
|
||||
module.exports.utils = { logger: console };
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
class CLIPlugin {
|
||||
constructor(options) {
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
setupHotPlugin(compiler) {
|
||||
const { HotModuleReplacementPlugin } = compiler.webpack || require("webpack");
|
||||
const hotModuleReplacementPlugin = Boolean(
|
||||
compiler.options.plugins.find((plugin) => plugin instanceof HotModuleReplacementPlugin),
|
||||
);
|
||||
|
||||
if (!hotModuleReplacementPlugin) {
|
||||
new HotModuleReplacementPlugin().apply(compiler);
|
||||
}
|
||||
}
|
||||
|
||||
setupPrefetchPlugin(compiler) {
|
||||
const { PrefetchPlugin } = compiler.webpack || require("webpack");
|
||||
|
||||
new PrefetchPlugin(null, this.options.prefetch).apply(compiler);
|
||||
}
|
||||
|
||||
async setupBundleAnalyzerPlugin(compiler) {
|
||||
// eslint-disable-next-line node/no-extraneous-require
|
||||
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
|
||||
const bundleAnalyzerPlugin = Boolean(
|
||||
compiler.options.plugins.find((plugin) => plugin instanceof BundleAnalyzerPlugin),
|
||||
);
|
||||
|
||||
if (!bundleAnalyzerPlugin) {
|
||||
new BundleAnalyzerPlugin().apply(compiler);
|
||||
}
|
||||
}
|
||||
|
||||
setupProgressPlugin(compiler) {
|
||||
const { ProgressPlugin } = compiler.webpack || require("webpack");
|
||||
const progressPlugin = Boolean(
|
||||
compiler.options.plugins.find((plugin) => plugin instanceof ProgressPlugin),
|
||||
);
|
||||
|
||||
if (!progressPlugin) {
|
||||
new ProgressPlugin({
|
||||
profile: this.options.progress === "profile",
|
||||
}).apply(compiler);
|
||||
}
|
||||
}
|
||||
|
||||
setupHelpfulOutput(compiler) {
|
||||
const pluginName = "webpack-cli";
|
||||
const getCompilationName = () => (compiler.name ? `'${compiler.name}'` : "");
|
||||
const logCompilation = (message) => {
|
||||
if (process.env.WEBPACK_CLI_START_FINISH_FORCE_LOG) {
|
||||
process.stderr.write(message);
|
||||
} else {
|
||||
this.logger.log(message);
|
||||
}
|
||||
};
|
||||
|
||||
const { configPath } = this.options;
|
||||
|
||||
compiler.hooks.run.tap(pluginName, () => {
|
||||
const name = getCompilationName();
|
||||
|
||||
logCompilation(`Compiler${name ? ` ${name}` : ""} starting... `);
|
||||
|
||||
if (configPath) {
|
||||
this.logger.log(`Compiler${name ? ` ${name}` : ""} is using config: '${configPath}'`);
|
||||
}
|
||||
});
|
||||
|
||||
compiler.hooks.watchRun.tap(pluginName, (compiler) => {
|
||||
const { bail, watch } = compiler.options;
|
||||
|
||||
if (bail && watch) {
|
||||
this.logger.warn(
|
||||
'You are using "bail" with "watch". "bail" will still exit webpack when the first error is found.',
|
||||
);
|
||||
}
|
||||
|
||||
const name = getCompilationName();
|
||||
|
||||
logCompilation(`Compiler${name ? ` ${name}` : ""} starting... `);
|
||||
|
||||
if (configPath) {
|
||||
this.logger.log(`Compiler${name ? ` ${name}` : ""} is using config: '${configPath}'`);
|
||||
}
|
||||
});
|
||||
|
||||
compiler.hooks.invalid.tap(pluginName, (filename, changeTime) => {
|
||||
const date = new Date(changeTime * 1000);
|
||||
|
||||
this.logger.log(`File '${filename}' was modified`);
|
||||
this.logger.log(`Changed time is ${date} (timestamp is ${changeTime})`);
|
||||
});
|
||||
|
||||
(compiler.webpack ? compiler.hooks.afterDone : compiler.hooks.done).tap(pluginName, () => {
|
||||
const name = getCompilationName();
|
||||
|
||||
logCompilation(`Compiler${name ? ` ${name}` : ""} finished`);
|
||||
|
||||
process.nextTick(() => {
|
||||
if (compiler.watchMode) {
|
||||
this.logger.log(`Compiler${name ? `${name}` : ""} is watching files for updates...`);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
apply(compiler) {
|
||||
this.logger = compiler.getInfrastructureLogger("webpack-cli");
|
||||
|
||||
if (this.options.progress) {
|
||||
this.setupProgressPlugin(compiler);
|
||||
}
|
||||
|
||||
if (this.options.hot) {
|
||||
this.setupHotPlugin(compiler);
|
||||
}
|
||||
|
||||
if (this.options.prefetch) {
|
||||
this.setupPrefetchPlugin(compiler);
|
||||
}
|
||||
|
||||
if (this.options.analyze) {
|
||||
this.setupBundleAnalyzerPlugin(compiler);
|
||||
}
|
||||
|
||||
this.setupHelpfulOutput(compiler);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = CLIPlugin;
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
function dynamicImportLoader() {
|
||||
let importESM;
|
||||
|
||||
try {
|
||||
importESM = new Function("id", "return import(id);");
|
||||
} catch (e) {
|
||||
importESM = null;
|
||||
}
|
||||
|
||||
return importESM;
|
||||
}
|
||||
|
||||
module.exports = dynamicImportLoader;
|
||||
+2343
File diff suppressed because it is too large
Load Diff
+63
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "webpack-cli",
|
||||
"version": "4.9.2",
|
||||
"description": "CLI for webpack & friends",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/webpack/webpack-cli.git"
|
||||
},
|
||||
"homepage": "https://github.com/webpack/webpack-cli/tree/master/packages/webpack-cli",
|
||||
"bin": {
|
||||
"webpack-cli": "./bin/cli.js"
|
||||
},
|
||||
"main": "./lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"cli",
|
||||
"scaffolding",
|
||||
"module",
|
||||
"bundler",
|
||||
"web"
|
||||
],
|
||||
"files": [
|
||||
"bin",
|
||||
"lib",
|
||||
"!**/*__tests__"
|
||||
],
|
||||
"dependencies": {
|
||||
"@discoveryjs/json-ext": "^0.5.0",
|
||||
"@webpack-cli/configtest": "^1.1.1",
|
||||
"@webpack-cli/info": "^1.4.1",
|
||||
"@webpack-cli/serve": "^1.6.1",
|
||||
"colorette": "^2.0.14",
|
||||
"commander": "^7.0.0",
|
||||
"execa": "^5.0.0",
|
||||
"fastest-levenshtein": "^1.0.12",
|
||||
"import-local": "^3.0.2",
|
||||
"interpret": "^2.2.0",
|
||||
"rechoir": "^0.7.0",
|
||||
"webpack-merge": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "4.x.x || 5.x.x"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@webpack-cli/generators": {
|
||||
"optional": true
|
||||
},
|
||||
"@webpack-cli/migrate": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack-bundle-analyzer": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack-dev-server": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"gitHead": "fb50f766851f500ca12867a2aa9de81fa6e368f9"
|
||||
}
|
||||
Reference in New Issue
Block a user