Adventures in React. Polishing Webpack

After taking the basics on React and understand its common pieces, I started to dig more deeper into the configuration provided in the yeoman template that I downloaded which was the React-Webpack.

As the first checkpoint, I looked at the webpack.config.js and I was shocked that there was not any configuration settings inside of it. What?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Get available configurations
const configs = {
base: require(path.join(__dirname, 'cfg/base')),
dev: require(path.join(__dirname, 'cfg/dev')),
dist: require(path.join(__dirname, 'cfg/dist')),
test: require(path.join(__dirname, 'cfg/test'))
};
/**
* Build the webpack configuration
* @param {String} wantedEnv The wanted environment
* @return {Object} Webpack config
*/
function buildConfig(wantedEnv) {
let isValid = wantedEnv &&
wantedEnv.length > 0 &&
allowedEnvs.indexOf(wantedEnv) !== -1;
let validEnv = isValid ? wantedEnv : 'dev';
return configs[validEnv];
}
module.exports = buildConfig(env);

It seems that this generator has different files for manage the most common environments of a front-end app. Depending the environment variable sent through the command line, it will pull out the file with its respective settings.


Configuration settings for Webpack

Seems that this configuration specific settings issue is pretty well managed by this generator.Yeih!

As I was going deeper into the configuration settings of the project I started to look at weird things like:

1
2
3
4
5
6
7
8
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: defaultSettings.port,
publicPath: defaultSettings.publicPath,
noInfo: false
},

And also some weird settings on entries and plugins into the configuration:
1
2
3
4
entry: [
'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
'webpack/hot/only-dev-server',
'./src/index',

After a research in depth, there is a feature on Webpack-Dev-Server called Hot-Module-Replacement which in short terms it allows to update changes from your react components inside the UI.

Also the Webpack-Dev-Server is an small node web server customized by webpack for run your application code and see the visual changes of what the application would be with your assets bundled.

After a while I discovered that you can enable the HMR feature by running the command webpack-dev-server –hot but by some reason it was not used in this template.

So investigating how this project runs, I found that there was a server.js file which was the responsible to run the dev-server without the webpack-dev-server command which had this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
require('core-js/fn/object/assign');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');
const open = require('open');
new WebpackDevServer(webpack(config), config.devServer)
.listen(config.port, 'localhost', (err) => {
if (err) {
console.log(err);
}
console.log('Listening at localhost:' + config.port);
console.log('Opening your system browser...');
open('http://localhost:' + config.port + '/webpack-dev-server/');
});

I figured out that there is a Node API for webpack in which you can call the server by code, and pass it out some specific settings,and run a server pretty much similar as Express/Node Http server does.

If you choose this path you must enter in the entries the URLs listed above as at this point the server doesnt have access to this HMR config setting, and also declare an extra plugin for it

1
2
plugins: [
new webpack.HotModuleReplacementPlugin(),

And also an extra loader for Babel:
1
loader: 'react-hot!babel-loader',

The template chose this path as you can send programatically the environment webpack settings to the server in order to see how the bundling would be depending the case.

As I begin to understand many things, I was having fun and getting amazed how this template handled this in a very elegant way.

Share