【 introduction 】

After vue/ CLI 3.x, webpack is encapsulated, so it is not intuitive to configure Webpack, but the official instructions on how to configure Webpack are made, and here is a summary based on Vue/CLI 4.4.1.

【 Contents 】

1. preparation
2. Import file configuration
3. Export File Configuration
4. Loader configuration
5. The plugin configuration
6. The proxy configuration
7. Port number Modification

[Preliminary preparation]

1. Start by creating a new project via VUE/CLI (I won’t go into details here)
2. Create a new one in the root directoryvue.config.jsFile through which all WebPack configuration changes are passed.
3. Run the following command to check the default Webpack configurationoutput.jsFile viewing)

vue inspect > output.js

Copy the code

Import file configuration

1. Add a new entry

module.exports = {
    chainWebpack: config= > {
        config
            .entry('app')   / / the key value of the entry
                .add('./src/testMain.js') // Add an entry path
                .end() // Return to the highest level of context with end, which returns to config}},Copy the code

2. Delete the default entry (there needs to be a new entry here, webpack needs at least one entry, this actually achieved the effect of changing the default entry)

module.exports = {
    chainWebpack: config= > {
        config.entryPoints.clear();
        config
            .entry('app')   / / the key value of the entry
                .add('./src/testMain.js') // Add an entry path
                .end() // Return to the highest level of context with end, which returns to config}},Copy the code

3. Deletes a path to the default entry

module.exports = {
    chainWebpack: config= > {
        config.entryPoints.clear();
        config
            .entry('app')   / / the key value of the entry
                .add('./src/testMain.js') // Add an entry path
                .add('./src/testMain2.js') // Add an entry path
                .end() // Return to the highest level of context with end, which returns to config
            .entry('app')
                .delete('./src/testMain2.js') // SRC/testmain.js}}Copy the code

Export File Configuration

const path = require('path');
module.exports = {
    chainWebpack: config= > {
        config
            .output
                .publicPath('/') / / modify publicPath
                .filename('[name].bundle.js') / / change the filename
    },
    outputDir: path.resolve(__dirname, 'dist') Path cannot be modified using config.output.path in webpack-chain. You need to use outputDir to define the path
}
Copy the code

Loader configuration

module.exports = {
    chainWebpack: config= > {
        config.module   / / match loader
            .rule('css2') Config.module. rule(' CSS ') = config.module.rule(' CSS ')
            .test(/test/) // Match the path
            .include // Contains the path
                .add('src')
                .add('test');

        config.module // Change the loader execution sequence
            .rule('css2')
            .test(/test/)
            .pre() Pitching (reverse the normal execution order) run the pitches post, inline, normal, pre
            .post()
            .enforce('pre')

        config.module   // Modify loader oneOf and loader configuration parameter options
            .rule('css2')
            .oneOf('inline')// The key value of oneOf is used to determine which oneOf
                .resourceQuery(/inline/) // Query parameters of the module
                .use('url') // Name rule
                    .loader('url-loader') // The loader to use
                    .options({ somekey: ['someArgs']})// Create a configuration item
                    .end()
                .use('url')
                    .tap(options= > { // Merge configuration items
                            return Object.assign(options, {
                                somekey: ['someArgsChange']
                            })
                        })
                    .end()
                .use('url2') // Add a loader to the use array
                    .loader('url-loader2')
                    .options({ somekey: ['someArgs2']})// Create a configuration item
                    .end()
                .end()
            .oneOf('external')
                .resourceQuery(/external/)
                .use('file')
                    .loader('file-loader');
            config.module // Insert loader before or after a loader
              .rule('less')// Find the target rule
              .oneOf('normal')// Find the rule under oneof, vue files generated by 'vue inspect > output.js' will be prompted accordingly
              .use('px2rem-loader')// Give your rule name
              .after('css-loader')Before or after is used to insert the loader before or after a rule
              .loader('px2rem-loader')// The loader used
              .options({ / / configuration items
                remUnit: 75}); }},Copy the code

The plugin configuration

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    chainWebpack: config= > {
        config  / / add the plugin
            .plugin('somePluginName') // Name rule
            .use(HtmlWebPackPlugin, [{ // Use plugins
                'someArgsName': 'someArgs'
            }, {
                'someArgsNameB': 'someArgsB'
            }])
            .tap(args= > { // Modify a plugin configuration parameter
                const index = args.findIndex(item= > item.hasOwnProperty('someArgsName'));
                args.splice(index, 1);
                return args
            })

        config  / / remove the plugin
            .plugins
            .delete('somePluginName')}},Copy the code

Reverse proxy configuration and port number configuration

module.exports = {
    chainWebpack: config= > {
        config.devServer
            .proxy({
                '/api': {
                    target: 'http://localhost:3000'.pathRewrite: {'^/api' : ' '}
                }
            })
            .port(9000)}},Copy the code

reference

Juejin. Cn/post / 684490…

Cli.vuejs.org/zh/config/#…

Github.com/neutrinojs/…