Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
a decent webpack config with babel and react
/*
# webpack config
npm install webpack webpack-cli uglifyjs-webpack-plugin @babel/core @babel/cli @babel/register @babel/preset-env @babel/preset-react babel-loader react react-dom
https://webpack.js.org
https://webpack.js.org/configuration
*/
const path = require('path')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const env = process.env.NODE_ENV
const prd = env === 'production'
const dev = env === 'development'
//
// ⚠️ customize the paths
//
const entryPath = path.join(__dirname, 'src', 'index.js')
const outputPath = path.join(__dirname, 'dist')
const opts = {
target: 'web',
mode: env,
entry: entryPath,
output: {
path: outputPath,
filename: 'index.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {presets: ['@babel/preset-env', '@babel/preset-react']}
}
]
},
plugins: [
// ⚠️ globally provide react to every script
new webpack.ProvidePlugin({
React: 'react'
})
],
watch: false,
cache: dev,
performance: {
hints: false
},
stats: {
assets: false,
colors: dev,
errors: true,
errorDetails: true,
hash: false
}
}
if (dev === true) {
opts.devtool = 'source-map'
}
if (prd === true) {
opts.optimization = {
minimize: true,
minimizer: [
new UglifyjsWebpackPlugin({
sourceMap: false,
uglifyOptions: {
ecma: 5,
mangle: true,
compress: true,
warnings: false
}
})
]
}
}
module.exports = opts
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.