webpack cli什么时候开始发挥作用答案

【问题标题】：When does webpack cli comes into playwebpack cli什么时候开始发挥作用
【发布时间】：2021-04-26 15:44:41
【问题描述】：

webpack-cli在项目中是如何使用的？

据我了解，只要我在 bash 终端上输入 npm run start，webpack 就会开始运行 webpack 配置文件，在该文件中我已经编写了将 jsx 转换为 js 的规则，使用babel，scss/less 到 css（如果我错了，请纠正我）。但是webpack-cli 在这一切中起到什么作用呢？

【问题讨论】：

标签： reactjs webpack webpack-cli

【解决方案1】：

webpack-dev-server 包负责在它为其创建的http 服务器上提供构建服务。如果您对源代码进行任何更改（使用 hot 重新加载选项时），它也会重新启动。

另一方面，webpack-cli 包负责源文件的构建和捆绑。所以，webpack-dev-server 必须运行 webpack-cli。

所以你必须安装这两个包。

你可以在这里看到它是如何做到的：

https://github.com/webpack/webpack-dev-server/blob/master/bin/webpack-dev-server.js

/** @type {CliOption} */
const cli = {
  name: 'webpack-cli',
  package: 'webpack-cli',
  binName: 'webpack-cli',
  installed: isInstalled('webpack-cli'),
  url: 'https://github.com/webpack/webpack-cli',
  preprocess() {
    process.argv.splice(2, 0, 'serve');
  },
};

// ...

const runCli = (cli) => {
  if (cli.preprocess) {
    cli.preprocess();
  }
  const path = require('path');
  const pkgPath = require.resolve(`${cli.package}/package.json`);
  // eslint-disable-next-line import/no-dynamic-require
  const pkg = require(pkgPath);
  // eslint-disable-next-line import/no-dynamic-require
  require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
};

// ...

runCommand(packageManager, installOptions.concat(cli.package))
.then(() => {
  runCli(cli);
})
.catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

在webpack v5 中，由于您使用webpack server（即webpack-cli 调用）来启动服务，因此该顺序有点颠倒，这将调用webpack-dev-server 包。

无论如何我都不是webpack 专家，但我认为这将帮助您更好地理解它。

【讨论】：