webpack-config-generator v1.5.2

Webpack Config Generator

Because configuring Webpack is too far complicated.

Manually creating webpack configuration files ...

• is time consuming
• is error prone
• requires knowledge of webpack
• has all the disadvantages of copy/paste in case of multiple configuration files

Project Health

Installation

Prerequisites

You need Git and NodeJS installed on your computer. You also need Python, this is required by the node-gyp dependency used by node-sass.

Configuration

You can use the template Webpack Base Project if you want to avoid making configuration errors by following the instructions below.

Create a new folder for the project and open a terminal there to execute the following commands.

npm init
npm install webpack-config-generator --save-dev

These commands will generate a big node_modules folder, don't forget to exclude it in a .gitignore file.

You must have an tsconfig.json file at the root of your project, add build commands to the package.json and create a configuration file named webpack.config.js.

tsconfig.json

{
	"extends": "webpack-config-generator/tsconfig",
	"compilerOptions": {
		"baseUrl": "src",
		"outDir": "build"
	}
}

package.json

{
	"scripts": {
+		"dev": "webpack serve --open --mode development",
+		"build": "webpack --mode production"
	},
}

webpack.config.js

"use strict";

const webpackConfigGenerator = require("webpack-config-generator");

module.exports = (env, argv) => {
	return webpackConfigGenerator({
		mode: argv.mode,
		entry: {
			app: ["./src/ts/App.ts", "./src/sass/style.sass"]
		},
		index: "./src/index.html",
		favicon: "./src/favicon.png"
	});
};

Project directory

Project
├── build
│   ├── img
│   │   ├── icons
│   │   │   └── ...
│   │   └── example.jpg
│   ├── App.d.ts
│   ├── app.min.css
│   └── app.min.js
├── src
│   ├── css
│   │   └── style.css
│   ├── img
│   │   └── example.jpg
│   ├── sass
│   │   └── style.sass
│   ├── ts
│   │   └── App.ts
│   ├── txt
│   │   └── loremIpsum.txt
│   ├── favicon.png
│   └── index.html
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js

Options

Now run the npm run dev command to verify that the project has been properly configured.

Build command

Development

In this mode, if one of your files is updated, the code will be recompiled so you don't have to run the full build manually.

npm run dev

Production

In this mode, the files will be generated in the build/ directory and automatically included in the index.html file.

npm run build

Additional Informations