Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project issrc/index.js and will output the result indist/main.js minified and optimized for production.

Usually, your projects will need to extend this functionality, for this you can create awebpack.config.js file in the root folder and webpack will automatically use it.

All the available configuration options are specified below.

New to webpack? Check out our guide to some of webpack'score concepts to get started!

Use a different configuration file

If for some reason you want to use a different configuration file depending on certain situations, you can change this via command line by using the--config flag.

package.json

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

Set up a new webpack project

webpack applies configuration defaults afterplugins defaults are applied.

Webpack has a huge set of options which might be overwhelming to you, please take advantage ofwebpack-cli starting from version v6.0.0 new toolcreate-new-webpack-app which could rapidly generate webpack application with specific configuration files for your project requirements, it will ask you a couple of questions before creating a configuration file.

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

npx might prompt you to installcreate-new-webpack-app if it is not yet installed in the project or globally. You might also get additional packages installed to your project depending on the choices you've made during the new webpack application generation.

$ npx create-new-webpack-app initNeed toinstall the following packages:create-new-webpack-app@1.1.1Ok to proceed?(y)? Which of the following JS solutionsdo you want to use? Typescript? Do you want to use webpack-dev-server? Yes? Do you want to simplify the creation of HTML filesfor your bundle? Yes? Do you want toadd PWA support? No? Which of the following CSS solutionsdo you want to use? CSS only? Will you be using PostCSSin your project? Yes? Do you want to extract CSSfor every file? Onlyfor Production? Which package managerdo 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 Contributors