Understanding How Webpack Works
Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles them into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today
Initial Configuration
For start we need to tell Webpack our application entry and output points
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/),
filename: 'bundle.js
}
}
entry: This is the main entry point of our application. This is where our initial loading and application logic will be
output.path: An absolute path for the resulting bundle. We use a built-in Node.js function (path) to dynamically create an absolute path, relative to where we are
output.filename: The filename of the resulting bundle. This can be anything, but by convention it’s called bundle.js
__dirname: This is the directory name of the current file.
Loaders
In most of the occasions our project source files are HTML, CSS , JS/TS. Webpack understands JavaScript from the box, but what about the other file types? Here are the most common Webpack loaders for this files types:
TypeScript
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
}
test: File type to look for. We provide a regex expression that will match .ts files
loaders: The loader to use
HTML
{
test: /\.html$/,
use: 'raw-loader'
}
test: File type to look for. We provide a regex expression that will match .html files
use: The loader to use
CSS
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
test: File type to look for. We provide a regex expression that will match .css files
loaders: The loaders to use. Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document)
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 is an example:
plugins: [
new webpack.ProgressPlugin(),
new webpack.ContextReplacementPlugin(
resourceRegExp,
[newContentResource],
[newContentRecursive],
[newContentRegExp]
)
]
ProgressPlugin: This plugin extracts progress information
ContextReplacementPlugin: If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolve relative to the previous resource
For more info about plugins please visit
Webpack Official Page
Resolve
Here you can change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail.
Example:
resolve: {
extensions: ['.ts', '.js']
}
This automatically resolves certain extensions which is what enables users to leave off the extension when importing:
import File from '../path/to/file'
For more info about resolve please visit
Webpack Official Page
Full Example
'use strict';
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './app/main.ts',
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'bundle.js'
},
module: {
loaders:
[
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
},
{
test: /\.htm$/,
use: 'raw-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.ProgressPlugin(),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
path.join(process.cwd(), 'app')
)
],
resolve: {
extensions: ['.ts', '.js']
}
};
The post Understanding How Webpack Works appeared first on Javascript, HTML5, jQuery Widgets.
