Skip to content

Instantly share code, notes, and snippets.

@qodesmith
Last active February 21, 2020 06:48
Show Gist options
  • Save qodesmith/6c5c9e64fccd660673148d93b1e263e2 to your computer and use it in GitHub Desktop.
Save qodesmith/6c5c9e64fccd660673148d93b1e263e2 to your computer and use it in GitHub Desktop.
Webpack 4 babel-loader config
/*
Relevant packages used:
-----------------------
"@babel/core": "^7.0.0-beta.40",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.40",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.2",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.10",
*/
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // This may not be needed since we supplied `include`.
include: path.resolve(__dirname, 'src'),
/*
https://goo.gl/99S6sU
Loaders will be applied from right to left.
E.x.: loader3(loader2(loader1(data)))
*/
use: [
// https://goo.gl/EXjzoG
{
loader: 'babel-loader',
options: {
presets: [
/*
To get tree shaking working, we need the `modules: false` below.
https://goo.gl/4vZBSr - 2ality blog mentions that the issue is caused
by under-the-hood usage of `transform-es2015-modules-commonjs`.
https://goo.gl/sBmiwZ - A comment on the above post shows that we
can use `modules: false`.
https://goo.gl/aAxYAq - `babel-preset-env` documentation.
*/
[
'@babel/preset-env',
{
targets: {
browsers: [
'last 2 versions'
]
},
modules: false // Needed for tree shaking to work.
}
],
// '@babel/preset-env', // https://goo.gl/aAxYAq
'@babel/preset-react' // https://goo.gl/4aEFV3
],
// https://goo.gl/N9gaqc - List of Babel plugins.
plugins: [
'@babel/plugin-proposal-object-rest-spread', // https://goo.gl/LCHWnP
'@babel/plugin-proposal-class-properties' // https://goo.gl/TE6TyG
]
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment