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-devThese 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
| Key | Information | Type | Required | Default value |
|---|---|---|---|---|
| mode | This parameter defines the default behavior of webpack-config-generator. 'development' or 'production'
|
string |
Yes | 'development' |
| watch | Enables real-time updating. | boolean |
No | (mode === 'development') |
| showError | Enables error display. | boolean |
No | true |
| minimize | Minimizes the size of the generated files. | boolean |
No | (mode !== 'development') |
| sourceMap | Enables the generation of source map files. | boolean |
No | true |
| entry | This parameter takes an object whose key is the name of the final file, and each value is an array of filenames. | Object |
No | {} |
| externals | Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime. | Object |
No | {} |
| provide | Automatically load modules instead of having to import or require them everywhere. | Object |
No | {} |
| index | Path of the project source file index.html. | string or null |
No | null |
| inject | Enables the injection of assets (styles/scripts) in the html file. | boolean |
No | true |
| buildFolder | Directory in which to place the generated files. | string |
No | 'build/' |
| favicon | Name of the favicon file. It must be in the src/ folder. | string or null |
No | null |
| tsLoader | You can choose between two loaders to read the typescript. |
'tsc' or 'babel'
|
No | tsc |
| exportLibrary | If the project is a library, exportLibrary contains information on how it is exported. | Object |
No | {} |
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 devProduction
In this mode, the files will be generated in the build/ directory and automatically included in the index.html file.
npm run buildAdditional Informations
