Last active
May 6, 2021 20:48
-
-
Save pts-moog16/c0c52d6fe050b5f4a9a73efab6cc14f9 to your computer and use it in GitHub Desktop.
Webpack config for bundling javascript files
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const merge = require('webpack-merge'); | |
const webpack = require('webpack'); | |
// args.getArgs is a custom function that I wrote for yarn | |
const args = require('./build/utils/args'); | |
// ENV Variables | |
const client = args.getArg('client') || 'default'; | |
const stubs = args.getArg('stubs'); | |
const PORT = 8080; | |
const localhost = 'http://127.0.0.1'; | |
const PATHS = { | |
app: path.join(__dirname, 'src/index.js') | |
}; | |
// Common loaders, options, plugins that are for my production and development build | |
const commonLoaders = { | |
module: { | |
rules: [ | |
{ | |
test: /\.js$/, | |
exclude: /(node_modules)/, | |
loader: 'babel-loader', | |
options: { | |
presets: [ | |
['es2015', {modules: false}], | |
'react' | |
], | |
plugins: [ 'react-hot-loader/babel' ] | |
} | |
} | |
] | |
}, | |
plugins: [ new ProgressBarPlugin() ] | |
}; | |
// the development or production config that I use in Gulpfile.js | |
module.exports = function(TARGET) { | |
switch(TARGET) { | |
case 'build:all': | |
return getConfigProd(); | |
default: | |
return getConfigDev(); | |
} | |
} | |
// Production build configuration | |
function getConfigProd() { | |
return merge(commonLoaders, { | |
entry: ['babel-polyfill', PATHS.app], | |
output: { | |
path: path.resolve(__dirname, 'static'), | |
publicPath: '/static/', | |
filename: "[name].[hash].bundle.js", | |
}, | |
plugins: [ | |
new webpack.optimize.UglifyJsPlugin({ /*... options ... */ }) | |
] | |
} | |
); | |
} | |
// Development build configuration | |
function getConfigDev() { | |
return merge(commonLoaders, { | |
entry: [ | |
'react-hot-loader/patch', | |
`webpack-dev-server/client?${localhost}:${PORT}`, | |
'webpack/hot/only-dev-server', | |
'babel-polyfill', | |
PATHS.app | |
], | |
watch: true, | |
devtool: 'eval', | |
output: { | |
path: path.resolve(__dirname, 'static'), | |
publicPath: '/', | |
filename: 'bundle.js' | |
} | |
}, | |
require('./build/getDevServerConfig')(PORT, localhost, client) | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment