We talked about how you could use the minified versions of your dependencies in development to make the rebundling go as fast as possible. Let us look at a small helper you can implement to make this a bit easier to handle.
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var nodeModulesDir = path.join(__dirname, '../node_modules');
var deps = [
'angular/angular.min.js',
'moment/min/moment.min.js',
'underscore/underscore-min.js',
];
var config = {
entry: [
'webpack/hot/dev-server',
'../app/main.js'
],
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js'
},
resolve: {
alias: {}
},
module: {
noParse: [],
loaders: []
}
};
// Run through deps and extract the first part of the path,
// as that is what you use to require the actual node modules
// in your code. Then use the complete path to point to the correct
// file and make sure webpack does not try to parse it
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules_dir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
Not all modules include a minified distributed version of the lib, but most do. Especially with large libraries like Angular JS you will get a significant improvement.
Exposing Angular to the global scope
You might be using distributed versions that requires Angular JS on the global scope. To fix that you can install the expose-loader by npm install expose-loader --save-dev
and set up the following config, focusing on the module property:
var webpack = require('webpack');
var path = require('path');
var nodeModulesDir = path.join(__dirname, '../node_modules');
var deps = [
'angular/angular.min.js',
'moment/min/moment.min.js',
'underscore/underscore-min.js',
];
var config = {
entry: ['webpack/hot/dev-server', '../app/main.js'],
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js'
},
resolve: {
alias: {}
},
module: {
noParse: [],
// Use the expose loader to expose the minified Angular JS
// distribution.
loaders: [{
test: path.resolve(nodeModulesDir, deps[0]),
loader: "expose?angular"
}]
}
};
deps.forEach(function (dep) {
var depPath = path.resolve(nodeModulesDir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;