Separation of WebPack configuration files

sketch

Separate the configuration file to achieve the goal of relying on one configuration file when developing and one configuration file when publishing. When the amount of code in the configuration file is huge, this can effectively improve the cleanliness;
All configuration mixed webpack config. JS can be deleted after separation

1, Install plug-ins & configure

It is usually separated into three files: a configuration file that is dependent on Development (I named dev.config.js here), a configuration file that is dependent on Publishing (I named prod.config.js here), and a configuration file that needs to be dependent on both modes (I named base.config.js here);

Install plug-ins
Yes, webpack still can't do this job
Webpack merge assists in merging two configuration files

npm i webpack-merge -D

The plug-in needs to be imported when using:

const webpackmerge = require('webpack-merge')

2, Withdrawal and storage

It can be removed from storage, but it can't be lost by webpack when it is used;

1. Detach profile

//This is webpack config. JS content
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                },

            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        prop: 3000
    }
};

Only the configuration required in the production environment is put into prod.config js

//This is prod.config JS content
module.exports = {
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        prop: 3000
    }
}

Only the configuration required in the development environment is put in dev.config,js

//This is the content of dev.config,js
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

Development environment - the configuration required in the production environment is put into base config,js

//This is base Config, JS
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                },

            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    mode: 'development',
};

So far, we have put webpack config. JS is divided into three files. You can delete the original webpack config. JS

2. Join between merge configuration files

When the configuration file is in use, it still needs to play the effect when combined; This requires the use of merge, which originally means "combination"
There are three updated documents:
1. Merge baseConfig and prodConfig in prodConfig

/*Because it is in pordConfig, you only need to introduce baseConfig and write it in webpackMerge() method, and then write the code to be merged in prodConfig in webpackMerge() method*/
const ProdConfig = require('./base.config.js')
module.exports = webpackMerge(baseConfig, {
        plugins: [
        new UglifyjsWebpackPlugin()
    ]
})

baseConfig is merged into prodConfig, so you only need to perform dev.config JS and prodConfig merge

2. Dev.config. In devconfig JS and prodConfig merge

/*Because it is in devConfig, you only need to introduce ProdConfig and write it in the webpackMerge() method, and then write the code that needs to be merged in devConfig in the webpackMerge() method*/
const ProdConfig = require('./prod.config.js')
module.exports = webpackMerge(ProdConfig, {
    devServer: {
        contentBase: './dist',
        inline:true
    }
})

Are you done? But this direct packaging will report an error

3, Pack

Finally, it needs to be in package JSON refers to the alias of packaging instruction for configuration, such as in build and dev:

"build":"webpack --config ./build/prod.config.js"
"dev":"webpack-dev-server --open --config ./build/dev.config.js"

After merging, the three files will be packaged and put into base config. JS folder, because the path set by the path of output in base is the absolute path of its own folder. Of course, it can be changed
Modify this absolute path to output the three files to the appropriate location

summary

I only picked up some parts with more content and wrote them. I'm ready to open more vue-cli
Thank you for reading here