开箱即用,webpack 不需要您使用配置文件。但是,它会假定项目的入口点是 src/index.js
,并将结果输出到 dist/main.js
,经过生产环境优化和压缩。
通常,您的项目需要扩展此功能,为此您可以在根文件夹中创建一个 webpack.config.js
文件,webpack 将自动使用它。
所有可用的配置选项都在下面列出。
如果出于某种原因,您想根据特定情况使用不同的配置文件,可以通过命令行使用 --config
标志来更改此项。
package.json
"scripts": {
"build": "webpack --config prod.config.js"
}
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!