Skip to content

Instantly share code, notes, and snippets.

@zjhiphop
Forked from forabi/Webpack 2.0.7-beta vs Rollup
Created September 30, 2016 07:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zjhiphop/c893079e80aff16124b2086bb5562290 to your computer and use it in GitHub Desktop.
Save zjhiphop/c893079e80aff16124b2086bb5562290 to your computer and use it in GitHub Desktop.
Webpack 2 vs Rollup
const config = {
presets: ['es2015', 'stage-3', 'react'],
plugins: [
'transform-object-rest-spread',
'transform-function-bind',
'transform-class-properties',
'transform-decorators',
],
sourceMaps: 'both',
};
if (process.NODE_ENV === 'production') {
[
'transform-react-constant-elements',
'transform-react-inline-elements',
'transform-node-env-inline',
'remove-debugger',
'remove-console',
].forEach(p => config.plugins.push(p));
config.sourceMaps = false;
}
module.exports = config;
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
const babelConfig = require('./babel.client');
babelConfig.presets[0] = 'es2015-rollup';
export default {
entry: 'src/client.js',
dest: 'src/public/bundle-rollup.js',
plugins: [
babel(Object.assign({
exclude: 'node_modules/**',
babelrc: false,
}, babelConfig)),
commonjs({
include: 'node_modules/**',
namedExports: {
react: ['PropTypes'],
'react-dom': ['render'],
},
}),
nodeResolve({
jsnext: false,
main: true,
browser: true,
}),
],
format: 'cjs',
};
❯ rollup --version
rollup version 0.25.3
❯ time rollup -c ./rollup.js
rollup -c ./rollup.js 4.65s user 0.22s system 118% cpu 4.131 total
❯ time webpack
Hash: ebb00bbccd954c114d3c
Version: webpack 2.0.7-beta
Time: 3623ms
Asset Size Chunks Chunk Names
bundle.js 1.44 MB 0 [emitted] bundle
bundle.js.map 1.64 MB 0 [emitted] bundle
+ 373 hidden modules
webpack 4.46s user 0.17s system 104% cpu 4.445 total
❯ du *.js -h
1.4M bundle.js
1.8M bundle-rollup.js
❯ time NODE_ENV='production' webpack
NODE_ENV='production' webpack 9.94s user 0.20s system 107% cpu 9.396 total
❯ time (NODE_ENV='production' rollup -c ./rollup.js && uglifyjs src/public/bundle-rollup.js --compress --mangle -o src/public/bundle-rollup.js)
( NODE_ENV='production' rollup -c ./rollup.js && uglifyjs --compress --mangl) 10.52s user 0.33s system 115% cpu 9.405 total
❯ du -h *.js
456K bundle.js
876K bundle-rollup.js
const path = require('path');
const webpack = require('webpack');
const babelConfig = require('./babel.client');
const config = {
debug: true,
devtool: 'source-map',
entry: {
bundle: './src/client.js',
},
output: {
path: path.resolve(__dirname, 'src/public'),
filename: '[name].js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: Object.assign(babelConfig, { cacheDirectory: './tmp' }),
}],
},
plugins: [],
resolve: { },
};
// Hot mode
if (process.env.HOT) {
config.devtool = 'eval';
config.entry.bundle.unshift('react-native-webpack-server/hot/entry');
config.entry.bundle.unshift('webpack/hot/only-dev-server');
config.entry.bundle.unshift('webpack-dev-server/client?http://localhost:8082');
config.output.publicPath = 'http://localhost:8082/';
config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
// Note: enabling React Transform and React Transform HMR:
config.module.loaders[0].query.plugins.push('react-transform');
config.module.loaders[0].query.extra = {
'react-transform': [{
target: 'react-transform-hmr',
imports: ['react-native'],
locals: ['module'],
}],
};
}
if (process.env.NODE_ENV === 'production') {
config.devtool = false;
config.debug = false;
config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment