配置

开箱即用,webpack 不需要您使用配置文件。但是,它会假定项目的入口点是 src/index.js,并将结果输出到 dist/main.js,经过生产环境优化和压缩。

通常,您的项目需要扩展此功能,为此您可以在根文件夹中创建一个 webpack.config.js 文件,webpack 将自动使用它。

所有可用的配置选项都在下面列出。

使用不同的配置文件

如果出于某种原因,您想根据特定情况使用不同的配置文件,可以通过命令行使用 --config 标志来更改此项。

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

设置一个新的 webpack 项目

Webpack 有大量的选项,这可能会让您感到不知所措,请利用 webpack-cli 从 v6.0.0 版本开始的新工具 create-new-webpack-app,它可以根据您的项目需求快速生成带有特定配置文件的 webpack 应用程序,它会在创建配置文件之前询问您几个问题。

npx create-new-webpack-app [command] [options]

如果 create-new-webpack-app 尚未在项目或全局安装,npx 可能会提示您安装它。您还可能会根据在生成新 webpack 应用程序期间所做的选择,为项目安装额外的软件包。

$ npx create-new-webpack-app init

Need to install the following packages:
create-new-webpack-app@1.1.1
Ok to proceed? (y)

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new Webpack project
...
...
...
[create-webpack] ✅ Project dependencies installed successfully!
[create-webpack] ✅ Project has been initialised with webpack!

18 贡献者

sokraskipjackgrgurbondzsriccterinjokesmattcekbariotissterlingvixjeremenichellidasarianudeeplukasgeiterEugeneHlushkobigdawggianshumanvtextbookcoly010chenxsan