@@ -3,6 +3,7 @@ title: Building for Production
3
3
sort : 13
4
4
contributors :
5
5
- henriquea
6
+ - rajagopal4890
6
7
---
7
8
8
9
Generating production builds with webpack is straight-forward. There are three things to keep in mind:
@@ -29,6 +30,7 @@ The `DefinePlugin` creates **compile** time constants. Useful for injecting your
29
30
30
31
``` js
31
32
// webpack.config.js
33
+
32
34
const webpack = require (' webpack' );
33
35
34
36
module .exports = {
@@ -52,6 +54,7 @@ webpack comes with UglifyJS plugin which minimize the output. You can pass an ob
52
54
53
55
``` js
54
56
// webpack.config.js
57
+
55
58
const webpack = require (' webpack' );
56
59
57
60
module .exports = {
@@ -75,7 +78,8 @@ module.exports = {
75
78
76
79
When we do have multiple configurations in mind for different environments, the easiest way is to write seperate js files for
77
80
each environment. For example:
78
- #### config/dev.js
81
+
82
+ ** dev.js **
79
83
``` js
80
84
module .exports = function (env ) {
81
85
debug: true ,
@@ -96,7 +100,8 @@ module.exports = function (env) {
96
100
}
97
101
}
98
102
```
99
- #### config/prod.js
103
+
104
+ ** prod.js **
100
105
``` js
101
106
module .exports = function (env ) {
102
107
debug: false ,
@@ -146,7 +151,7 @@ An advanced approach would be to have a base configuration file, put in all comm
146
151
and then have environment specific files and simply use 'webpack-merge' to merge them. This would help to avoid code repetitions.
147
152
For example, you could have all your base configurations like resolving your js, ts, png, jpeg, json and so on.. in a common base file as follows:
148
153
149
- #### base.js
154
+ ** base.js **
150
155
``` js
151
156
module .exports = function () {
152
157
return {
@@ -203,7 +208,7 @@ module.exports = function() {
203
208
And then merge this base config with an environment specific configuration file using 'webpack-merge'.
204
209
Let us look at an example where we merge our prod file, mentioned above, with this base config file using 'webpack-merge':
205
210
206
- #### prod.js (updated)
211
+ ** prod.js (updated) **
207
212
``` js
208
213
const webpackMerge = require (' webpack-merge' );
209
214
0 commit comments