You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, the webpack config is scattered across buildWebpackConfig.js and generally not useable/testable outside the typical build flow. My goal is to have a separate webpack.config.js that you could also feed directly to webpack. This way we can easily fork a new, separate webpack process.
It's also more clear what configuration webpack is actually using. I think, this way it might be easier for newcomers to understand what's going on. create-react-app took a similar approach.
However, I would merge all possible configurations into one file, since it makes easier to grasp what the actual configuration will be. A typical webpack config would then look like this:
// This is an example from a project of mine.// It is not the intended config for react-serverconstENV=process.env.NODE_ENV||'development';constTARGET=process.env.WEBPACK_TARGET||'web';constisDev=ENV==='development';constisNodeTarget=TARGET==='node';constisWebTarget=TARGET==='web';module.exports=clean({target: TARGET,context: path.resolve(__dirname,'../'),entry: isNodeTarget ? {server: require.resolve('../webapp/server/server.js')} : {client: clean([isDev&&require.resolve('react-hot-loader/patch'),require.resolve('../webapp/client/client.js')])},output: clean({path: isNodeTarget ?
path.resolve(__dirname,'..','dist') :
path.resolve(__dirname,'..','public'),libraryTarget: isNodeTarget ? 'commonjs2' : null,pathinfo: isDev,publicPath: '/assets/',// Chunk hashes are not supported in conjunction with HMRfilename: `[name]${isDev ? '' : '.[chunkhash]'}.js`,chunkFilename: `chunk-[id]${isDev ? '' : '.[chunkhash]'}.js`}),plugins: clean([newExtractTextPlugin('[name].[contenthash].css',{disable: isNodeTarget||isDev,allChunks: true}),isWebTarget&&newwebpack.DefinePlugin({process: {env: {NODE_ENV: JSON.stringify(ENV)}}}),isNodeTarget&&newwebpack.DefinePlugin({WEBPACK_ASSETS_PATH: JSON.stringify(path.resolve(__dirname,'..','webpack-assets.json'))}),isWebTarget&&newCleanPlugin(['public'],{root: path.resolve(__dirname,'..'),verbose: false}),isWebTarget&&newAssetsPlugin(),!isDev&&isWebTarget&&newwebpack.optimize.OccurenceOrderPlugin(),!isDev&&isWebTarget&&newwebpack.optimize.UglifyJsPlugin(),!isDev&&isWebTarget&&newwebpack.optimize.DedupePlugin()]),bail: !isDev,devtool: isDev ? '#source-map' : null,devServer: {noInfo: true,inline: true,proxy: {'*': `http://localhost:${process.env.PORT||3000}`}}});functionclean(thing){if(Array.isArray(thing)){returnthing.filter(v=>Boolean(v));}returnObject.keys(thing).reduce((o,k)=>thing[k]==null ? o : (o[k]=thing[k],o),{});}
While it first might look intimidating, I think it's better graspable what configuration will be used in which circumstances. The clean() function is designed to remove all configurations that should not be active.
During this refactoring, I would remove inconsistent webpack configurations as pointed out in some of my comments.
The text was updated successfully, but these errors were encountered:
Following up #794
Separate and refactor webpack config
Currently, the webpack config is scattered across
buildWebpackConfig.js
and generally not useable/testable outside the typical build flow. My goal is to have a separatewebpack.config.js
that you could also feed directly to webpack. This way we can easily fork a new, separate webpack process.It's also more clear what configuration webpack is actually using. I think, this way it might be easier for newcomers to understand what's going on. create-react-app took a similar approach.
However, I would merge all possible configurations into one file, since it makes easier to grasp what the actual configuration will be. A typical webpack config would then look like this:
While it first might look intimidating, I think it's better graspable what configuration will be used in which circumstances. The
clean()
function is designed to remove all configurations that should not be active.During this refactoring, I would remove inconsistent webpack configurations as pointed out in some of my comments.
The text was updated successfully, but these errors were encountered: