Using webpack for copying file if it is on localhost, else minifying

Question

I am new to Webpack.

My team is using Golang for the server, and starting to use ReactJS + MobX on the front end. We use Webpack to bundle/transpile all the code into one bundle file per page. (It is multipage application.)

My PM has me looking into moving all this front-end code from static to a new folder called src , and to do the following:

setup the environment such that:

• if running localhost, simply copy the files to that folder (we're debugging it)
• else, minify the files to that folder (we don't want the end user to be able to reverse-engineer our stuff/see its source code)

Since Golang is running the server and not Webpack (our use case is merely the transpilation at development time), is there way that I can get Webpack to work like this?

NOTE: our entry files are not necessarily on the same level, but have path like static/js/[relative path of one or more levels]/entry.js

Answer 1

Use webpack merge you can do that

Basically you will need 3 file

1. Main webpack.config.js file
2. webpack.dev.js for dev enviroment
3. webpack.prod.js for production enviroment

Example: webpack.dev.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_URL': JSON.stringify('http://localhost:5000/')
            }
        })
    ],
    watch: true
});

webpack.prod.js. You can see that I'm using some optimization packge in prod mode only like OptimizeCSSAssetsPlugin, CompressionPlugin, UglifyJsPlugin to uglify and gzip the file content to improve performance. You can adjust accordingly with your need.

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'BASE_URL': JSON.stringify('a/')
            }
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
    ]
});

To run it simply use these 2 command in your package.json

 "prod": "webpack -p --mode=production --config webpack.prod.js",
 "start": "webpack --mode=development --config webpack.dev.js",