知海

配置参考索引

webpackjsorg-main配置参考

配置参考索引

webpack 开箱即用,不要求你使用配置文件。但它会假定你项目的入口为 src/index.js,并将结果输出到 dist/main.js,该文件会被压缩并针对生产环境进行优化。

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

以下列出了所有可用的配置选项。

提示: 刚接触 webpack?请查看我们关于 webpack 核心概念 的指南来入门!

使用不同的配置文件

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

package.json

json 复制代码
"scripts": {
  "build": "webpack --config prod.config.js"
}

设置一个新的 webpack 项目

警告: webpack 会在 插件默认值 被应用之后,再应用配置默认值。

webpack 拥有大量选项,可能会让你不知所措。请使用 webpack-cli 从 v6.0.0 版本开始提供的新工具 create-webpack-app,它可以根据你的项目需求快速生成带有特定配置文件的 webpack 应用,并在创建配置文件之前向你询问几个问题。

bash 复制代码
npx create-webpack-app [command] [options]

如果 create-webpack-app 尚未安装到项目中或全局环境中,npx 可能会提示你安装它。根据你在生成新 webpack 应用期间所做的选择,你的项目中可能还会安装额外的包。

bash 复制代码
$ npx create-webpack-app init

Need to install the following packages:
create-webpack-app@2.0.0
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!

帮助我们改进文档

发现翻译问题或内容错误?请告诉我们。