Adventures in React:More Webpack

Continuing with this whole trip around the world of React, we left off in analyzing the configuration that the react-webpack Yeoman generator provides to develop apps.

I started to see that the default settings that the generator provided wasnt not clear from all, and then I started to make my own personal configuration for webpack, (not sure if that was the real reason or my wish to learn webpack so bad).

I started then with an empty webpack config file, and started typing the big Javascript object required by it. As I was typing I started to see from the Yeoman Template that the configurations for prod and dev were different, as for example the Hot Replacement feature were not included in prod and also there were some extra webpack plugins registered in the prod application.

I decided that in the future I will make a separation of them and merge them depending on the environment requested. I took a shot on dev first.

First I started with my entries, in which I figured that some weird urls inside of them:

1
2
3
4
5
entry:{
bundle:['webpack-dev-server/client?http://127.0.0.1:8080',
'webpack/hot/only-dev-server',
'./app.js']
},

It resulted that after a lot of research and trials, these urls are required by webapack if you pretend to run it inside your code via NodeJs instead of console commands as node server.js for example, where in this file you have the following server initialization with the Node API provided by webpack:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
new WebpackDevServer(webpack(config),{
contentBase: 'public',
historyApiFallback: true,
hot: true,
publicPath:'/public/assets/js/'
})
.listen(8080, 'localhost', (err) => {
if (err) {
console.log(err);
}
console.log('Listening at localhost:8080');
console.log('Opening your system browser...');
open('http://localhost:8080/webpack-dev-server/');
});

Here we have a WebpackDevServer object that initializes a node server with the configuration provided in a _config _variable, which is the big object literal that we will build, and that is passed to the webpack function to process it

As a second argument, you must pass the config settings that are particular to the server provided by webpack. I thought that it would be simpler if I include this settings also in the config variable, I tried and it didn’t work out for me. By some reason, the second argument has an special treatment and it must provide its own settings here,

After creation we can call the listen method and the server wrapped with webpack sugar will start.

Then, back to our file, apart from these urls I included the starting point of the dependency tree.

After that, the output section where you place the destination of the final bundled file and also this weird value called public path.

I got a lot of confusion of it as you dont know if the html that consumes your bundled file should be placed in this path marked as public.

I then understood that this path is just some kind of telling the files of the web application will be accesible from the placed url, but physically in can be in some other place.

1
2
3
4
5
output:{
path:path.resolve('build/js/'),
publicPath:'/public/assets/js/',
filename:'[name].js'
},

Then we have our loaders which are pretty self-explanatory and our plugins section where a HotModuleReplacement plugin must be included for Hot Replacement features:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module: {
loaders: [
{
test:/\.js$/,
exclude:constants.ROOT_PATH + '/node_modules/',
loader:'react-hot!babel-loader'
},
{
test: /\.css$/,
exclude: constants.ROOT_PATH + '/node_modules/',
loader: 'style-loader!css-loader'
},
{
test: /\.scss/,
exclude: constants.ROOT_PATH + '/node_modules/',
loader: 'style-loader!css-loader!sass-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]

And thats it for development, we have a nice configuration that handles the most required values to have a decent development ready for webpack.

Next episode we will tackle onto production so stay tuned!

Thanks for reading.

 

 

 

Share