The Vue project customizes the packaging entry through chainWebpack

By default, the development mode and release mode of the Vue project share the same packaged entry file (ie src/main.js). In order to separate the development process of the project from the release process , we can specify the packaged entry file for each of the two modes, namely:

1. The entry file of the development mode issrc/main-dev.js
2. The entry file of the release mode issrc/main-prod.js

In the vue.config.jsexported configuration object, add a new configureWebpackor chainWebpacknode to customize the packaging configuration of webpack.

Here, configureWebpackand have chainWebpackthe same effect, the only difference is that they modify the webpack configuration in a different way:

1. chainWebpackModify the default webpack configuration through chain programming
2. configureWebpackModify the default webpack configuration by operating the object

Through chainWebpackcustom packaging entry

vue.config.jsAdd a chainWebpacknode under the root directory of the Vue project , such as:

module.exports = {
    
    
    chainWebpack: config => {
    
    
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
    
    
            config.entry('app').clear().add('./src/main-prod.js')
        });
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
    
    
            config.entry('app').clear().add('./src/main-dev.js')
        });
    }
}