Aventures in React. Entering the Webpack

In this series of keep digging into build applications with React, we left of at using an scaffolded template provided by Yeoman which provided all the setup required to build a React application with it.

As well as the other scaffolded templates, I reviewed what this template was doing for me in behing and started to look how this Webpack thing worked.

Getting our hands dirty.

Webpack high level diagram Webpack high level diagram

Webpack is a module bundler and a dependency management system, in which you are able to call any kind of module (file) , inside any other module of your application and bundle/transform all of these files with “loaders”.

As I was analizing the documentation, books, videos and some other resources in order to understand Webpack I started to freak out as some concepts came to shine:”transpilation”,”loaders”,”modules”,”commonjs”.

Then after learning some of the theory and review the webpack configuration in the downloaded template, I started to play and identify some of the common pieces that are key to work with it.

First you need a file called webpack.config.js which will contain all the required configuration required by webpack in order to work in your application.

This one is practically is a simple json object which requires the following members in order to work properly:

1
2
3
4
5
module.exports={
entry:{},
output:{}
module:{}
}

First we got the entry member which is mostly the main initial file where your dependency tree starts.

This is important, as actually I initially thought that you had to place all the file locations of your dependencies here, but actually is the main file where the dependencies starts to be required, in which Webpack automatically will travel across them and it will retrieve them for you. Sounds amazing right?

If you have files that are most global libraries and doesnt have a dependency tree per se like bootstrap, jquery, etc you can place them here as well and provide a different name,which actually would be the name of the bundle that will be generated along with the other one.

1
2
3
4
5
6
7
entry: {
//Initial file where my app starts 
app: path.join(constants.APP_PATH,'/app'),
//All of my vendor files coming from package.json
vendor: Object.keys(pkg.dependencies)
}

We defined our entry, now we need to define our output, which receives only the folder where you want webpack to place your transformed and bundled assets.

You can also name the file that will be your output, which can a be fixed one or you can place square brackets in order to tell webpack to generate more than one bundle based on the set of names that you defined in the entry section and optionally a hash as well.

1
2
3
4
output: {
path: constants.BUILD_PATH,
filename: '[name].[chunkhash].js?'
}

And finally the module section, which is the set of loaders that will be the responsible for transform/process files according to matches.

A loader is simply a piece of functionality applied to a given file and transform it for simplicity. With these loaders we can transforms scss to css, ES2015 code to ES5 or JSX to ES5.

The common structure of the module goes like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module: {
loaders: [
{
test:/\.jsx$/,
exclude:constants.ROOT_PATH + '/node_modules/',
loader:'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'
}
]
}

Practically, you just place a loaders array, which be the set of loaders that you will use to process files.

Then each member in the array as an object with two must have keys:test and loader.

The test is a regular expression which will be used by webpack to point to the respective loader to process the coming file, which can be downloaded via npm actually.

As for example, in the first loader Im telling webpack that all files that end with jsx extension , pass through the babel loader so they can be transpiled and converted to ES5.

That’s it for this episode, I will be posting more content on this tool as I have been discovering some interesting stuff to apply in my modern web applications.

Share