Setting up webpack
Install webpack CLI:
npm install webpack -g
Create your project and initialize npm:
mkdir webpack-demo && cd webpack-demo
Set up lib/main.js:
var a = 42;
console.log(`test ${a}`);
(At this point, you can compile it directly with webpack-cli)
webpack lib/main.js bundle.js
To enable full ES6-support (such as modules), install babel:
npm install babel-loader babel-core babel-preset-es2015
Set up webpack.config.js:
module.exports = {
entry: './lib/main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
};
Set up index.html:
<!doctype html>
<script src="bundle.js"></script>
Compile it:
webpack
Setting up multiple entries
Change entry and output in webpack.config.js:
entry: {
name: 'path-to-source'
},
output: {
path: 'output-directory',
filename: '[name].js'
}
Adding more loaders
Add the loader you need, e.g. the style-loader and css-loader (for loading CSS-files):
npm install json-loader css-loader
Extend the modules-property in webpack.config.js:
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
Adding source-map
Add the following snippet to webpack.config.js:
devtool: "source-map"
Resources
- tutorials/getting-started
- optimization (how to create production ready code)