Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separate and refactor webpack config #795

Closed
jhnns opened this issue Jan 4, 2017 · 0 comments
Closed

Separate and refactor webpack config #795

jhnns opened this issue Jan 4, 2017 · 0 comments

Comments

@jhnns
Copy link
Contributor

jhnns commented Jan 4, 2017

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 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-server

const ENV = process.env.NODE_ENV || 'development';
const TARGET = process.env.WEBPACK_TARGET || 'web';
const isDev = ENV === 'development';
const isNodeTarget = TARGET === 'node';
const isWebTarget = 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 HMR
        filename: `[name]${isDev ? '' : '.[chunkhash]'}.js`,
        chunkFilename: `chunk-[id]${isDev ? '' : '.[chunkhash]'}.js`
    }),
    plugins: clean([
        new ExtractTextPlugin('[name].[contenthash].css', {
            disable: isNodeTarget || isDev,
            allChunks: true
        }),
        isWebTarget && new webpack.DefinePlugin({
            process: {
                env: {
                    NODE_ENV: JSON.stringify(ENV)
                }
            }
        }),
        isNodeTarget && new webpack.DefinePlugin({
            WEBPACK_ASSETS_PATH: JSON.stringify(path.resolve(__dirname, '..', 'webpack-assets.json'))
        }),
        isWebTarget && new CleanPlugin(['public'], {
            root: path.resolve(__dirname, '..'),
            verbose: false
        }),
        isWebTarget && new AssetsPlugin(),
        !isDev && isWebTarget && new webpack.optimize.OccurenceOrderPlugin(),
        !isDev && isWebTarget && new webpack.optimize.UglifyJsPlugin(),
        !isDev && isWebTarget && new webpack.optimize.DedupePlugin()
    ]),
    bail: !isDev,
    devtool: isDev ? '#source-map' : null,
    devServer: {
        noInfo: true,
        inline: true,
        proxy: {
            '*': `http://localhost:${ process.env.PORT || 3000 }`
        }
    }
});

function clean(thing) {
    if (Array.isArray(thing)) {
        return thing.filter(v => Boolean(v));
    }
    return Object.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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant