- require
- babel
- extensions
- styles
- images
- fonts
- magic globals
- multiple entries, common code
- async loading
- webpack-dev-server
- react-hot-loader
- all together now
npm install --save-dev webpack
# browserify main.js > bundle.js
webpack main.js bundle.js
webpack.config.js
:
module.exports = {
entry: './main.js'
output: {
filename: 'bundle.js'
}
}
-p
for optimization+minification, -d
for source maps
A loader is like a transform from browserify.
npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
module.exports = {
// ...
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}]
}
}
.babelrc
:
{
"presets": ["es2015", "react"]
}
module.exports = {
// ...
resolve: {
// require('./file') instead of require('./file.js')
extensions: ['', '.js']
}
}
In your entry point(s), or per component,
// require('./styles.scss')
import './styles.scss'
- style-loader -> inline css into a style tag
- css-loader -> resolves imports and url()
npm install --save-dev style-loader css-loader
// ...
{
test: /\.css$/,
loaders: ['style', 'css']
}
sass-loader -> { test: /\.scss$/, loaders:['style', 'css', 'sass'] }
npm install --save-dev sass-loader
PostCSS via
npm install --save-dev postcss-loader postcss-import autoprefixer precss
module.exports = {
// ...
module: {
loaders: [{
test: /\.scss$/,
loaders: ['style', 'css', 'postcss']
}]
},
postcss: function (webpack) {
return [
require('postcss-import')({ addDependencyTo: webpack }),
require('precss')(),
require('autoprefixer')({ browsers: ['last 2 versions'] })
];
}
}
import './banner.png'
npm install --save-dev url-loader
// inline images as BASE64 strings if < 8kb
{
test: /\.(png|jpg)$/,
loader: 'url?limit=8192'
}
{
test: /\.(woff2?|ttf|eot|svg)$/,
loader: 'url?limit=100000'
}
if (__DEV__) {
console.log('Extra logging code for dev')
}
let globalsPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
'process.env': {
'NODE_ENV': JSON.stringify('development'),
}
})
module.exports = {
// ...
plugins: [globalsPlugin]
}
let commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js')
module.exports = {
entry: {
foo: './foo.js',
bar: './bar.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
}
if (window.location.pathname === '/foo') {
showLoadingState();
require.ensure([], function() { // [] -> no other deps before this
hideLoadingState();
require('./foo.js').show(); // when this function is called, the module is guaranteed to be synchronously available.
});
} else if (window.location.pathname === '/bar') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./bar.js').show();
});
}
with hot module reload:
npm install --save-dev webpack-dev-server
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000'
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./main.js'
],
output: {
path: 'build',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './build',
colors: true,
hot: true
}
}
and go to http://localhost:3000/webpack-dev-server/bundle
Or make ./build/index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
and go to http://localhost:3000.
react-hot-loader (until this stabilizes)
npm install --save-dev react-hot-loader
{
test: /\.js$/,
loaders: ['react-hot', 'babel']
}
npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react babel-plugin-react-transform react-transform-hmr react-transform-catch-errors redbox-react
{
"presets": ["es2015", "react"],
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}]
]
}
Babel(ES2015,React) + PostCSS(precss,autoprefixer) + HMR
npm install --save-dev webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react style-loader css-loader postcss-loader postcss-import autoprefixer precss url-loader react-hot-loader
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/main.js')
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loaders: ['react-hot', 'babel']
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'postcss']
}, {
test: /\.(png|jpg)$/,
loader: 'url?limit=8192'
}, {
test: /\.(woff2?|ttf|eot|svg)$/,
loader: 'url?limit=100000'
}]
},
postcss: function (webpack) {
return [
require('postcss-import')({ addDependencyTo: webpack }),
require('precss')(),
require('autoprefixer')({ browsers: ['last 2 versions'] })
];
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname, 'build'),
colors: true,
hot: true
}
}
.babelrc
:
{
"presets": ["es2015", "react"]
}
npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader bootstrap-loader imports-loader
npm install --save jquery