Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tree-Shaking with Babel 6, Webpack 2, and React.
{
"presets": [
["es2015", {
"es2015": {
"loose": true,
"modules": false
}
}], "react"
]
}
import React from 'react';
import ReactDOM from 'react-dom';
const App = React.createClass({
render() {
return (
<div>Hello World</div>
);
}
});
ReactDOM.render(<App/>, document.querySelector('#app'));
{
"name": "babel6-webpack2-react-tree-shaking",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"babel-core": "6.18.2",
"babel-loader": "6.2.8",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babili": "0.0.9",
"babili-webpack-plugin": "0.0.7",
"http-server": "0.9.0",
"react": "15.4.1",
"react-dom": "15.4.1",
"webpack": "2.1.0-beta.27"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "http-server -a 0.0.0.0 -p 9000"
}
}
const BabiliPlugin = require('babili-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
'app': './app.js'
},
output: {
path: './dist',
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [
'es2015',
'react'
],
plugins: []
},
include: [
path.resolve(__dirname, 'app')
]
}, {
test: /\.json$/,
loader: "json-loader"
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new BabiliPlugin()
],
resolve: {
modules: [
path.join(process.cwd(), 'app'),
'node_modules'
],
extensions: ['.js', '.json']
},
devtool: false
};
@pasupuletics

This comment has been minimized.

Copy link

pasupuletics commented Aug 5, 2017

Any specific why you have mentioned babel config along with babel-loader in webpack config, babel should pick config from .babelrc right? am I missing anything here?

@welll

This comment has been minimized.

Copy link

welll commented Aug 10, 2017

@pasupuletics, I think that there is no reason. However, sometimes you want to pass a custom options to babel-loader and the you can't modify the .babelrc because another task/build/tool is using it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.