Initial Webpack Configuration
For start we need to tell Webpack our application entry and output points
module.exports = {
entry: {
myApp: __dirname + '/src/app.js',
}
output: {
path: __dirname + '/build',
filename: '[name].bundle.js'
}
}
entry: Webpack gets one file for entry
output.path: Webpack outputs file to ‘./build’ folder located in our root folder
output.filename: Webpack names both files according to their entry
In most cases you will have only 1 entry file, from which Webpack will get to all needed other files. But it is possible to have more than one.
Loaders
Babel
Babel is a platform for JavaScript compilation and tooling. It’s a powerful tool that, among other things, let you: Use next versions of JavaScript (ES6 / ES2015, ES7 / ES2016, etc.), not yet fully supported in all browsers. Use JavaScript syntax extensions, such as React’s JSX.Babel is a stand alone tool, but it can be used as a loader and pair very well with Webpack.
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:
{
presets: ['es2015', 'react']
}
}
test: A regular expression that matches the file extensions that should run through this loader (Required).
loader: The name of the loader (Required).
include / exclude: Optional setting to manually set which folders and files the loader should explicitly add or ignore.
query: The query setting can be used to pass Additional options to the loader.
There are a lot of more loaders like css or json and you must add them here if you need them in your project.
Important: In order to use this loaders we need to have their dependencies installed.
For more info about loaders please visit Webpack Official Page
Plugins
They serve the purpose of doing anything else that a loader cannot do.Here are some examples:
DefinePlugin
new webpack.DefinePlugin
({
'process.env':
{
'NODE_ENV': JSON.stringify('production')
}
})
The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.
UglifyJsPlugin
new webpack.optimize.UglifyJsPlugin
({
mangle: true,
sourcemap: false,
compress: { warnings: false }
})
This plugin adds support for the UglifyJS Features.
Full Example
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry:
{
myApp: __dirname + '/src/app.js',
},
output:
{
path: __dirname + '/build',
filename: '[name].bundle.js'
},
module:
{
loaders:
[{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:
{
presets: ['es2015', 'react']
}
}]
},
plugins:
[
new webpack.DefinePlugin
({
'process.env':
{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin
({
mangle: true,
sourcemap: false,
compress: { warnings: false }
})
]
};