webpack cli 什么时候发挥作用
When does webpack cli comes into play
webpack-cli在项目中如何使用?
据我了解,只要我在 bash 终端上输入 npm 运行 start,webpack 就会启动 运行ning webpack 配置文件,我在其中编写了规则,使用 babel 将 jsx
转换为 js
,将 scss/less
转换为 css
(如果我错了请纠正我)。
但是 webpack-cli
在这一切中发挥什么作用呢?
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
专家,但我认为这会帮助您更好地理解它。
webpack-cli在项目中如何使用?
据我了解,只要我在 bash 终端上输入 npm 运行 start,webpack 就会启动 运行ning webpack 配置文件,我在其中编写了规则,使用 babel 将 jsx
转换为 js
,将 scss/less
转换为 css
(如果我错了请纠正我)。
但是 webpack-cli
在这一切中发挥什么作用呢?
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
专家,但我认为这会帮助您更好地理解它。