webpack的基本配置及其原理，文章推荐

const name = defaultSettings.title || 'vue Element Admin'
//page title 浏览器标题

const path = require('path')
//vue-cli搭建项目之webpack配置
//参考文献：https://blog.csdn.net/sneer_shen/article/details/122672041
// https://blog.csdn.net/luobo2345/article/details/121206374
//--devServe属性配置--https://blog.csdn.net/weixin_44869002/article/details/105864712
//--devServe属性.proxy--
//加上第6行
module.exports = {
    /**
     * You will need to set publicPath if you plan to deploy your site under a sub path,
     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then publicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     * Detail: https://cli.vuejs.org/config/#publicpath
     */
    publicPath: '/weather/',//基本路径
    outputDir: 'dist',//输出文件目录
    assetsDir: 'static',//放置生成的静态资源
    lintOnSave: process.env.NODE_ENV === 'development',
    //Type：boolean|warning|default|error  是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
    productionSourceMap: false,
    //如果你不需要生产环境的source map，可以将其设置为false以加速生产环境构建
    devServer: {
        //如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。
        //devServer.proxy 可以是一个指向开发环境 API 服务器的字符串
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true,
        },
        proxy: {
            '/weather/api/': {
                target: 'http://pseo.sdu.edu.cn/weather/api',
                //  请求的第三方接口
                changeOrigin: true,
                //将主机头的来源更改为目标URL，也就是是否允许跨域
                //  在本地新建一个虚拟服务端，然后发送请求的数据
                //  并同时接受请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    //路径重写
                    '^/weather/api/': '/'
                    //    '^/weather/api/'是一个正则表达式，表示要匹配请求的url中,
                    //    全部'https://localhost:8080'转换为'http://pseo.sdu.edu.cn/weather/api'
                }
            },
            'weather2/api/': {
                target: 'http://pseo.sdu.edu.cn/weather2/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/weather/api/': '/'
                }
            }
        }
    },
    configureWebpack: {
        //如果这个值是一个对象，则会通过webpack-merge合并到最终配置中。如果这个值是个函数，则会接收被解析的配置作为参数。
        //该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
        //参考文献
        //https://cli.vuejs.org/zh/guide/webpack.html
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
    chainWebpack(config) {
        //链式操作
        config.plugins('preload').tap(() => [
            {
                rel: 'preload',
                fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
                include: 'initial',
            }
        ])
        // when there are many pages, it will cause too many meaningless requests
        config.plugins.delete('prefetch')

        //set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            })
            .end()

        config
            .when(process.env.Node_ENV !== 'development',
                config => {
                    config
                        .plugins('ScriptExtHtmlWebpackPlugin')
                        .after('html')
                        .use('script-ext-html-webpack-plugin',[{
                            // `runtime` must same as runtimeChunk name. default is `runtime`
                            inline:/runtime\..*\.js$/
                        }])
                        .end()
                    config
                        .optimization.splitChunks({
                        chunks:'all',
                        cacheGroups:{
                          libs:{
                            name:'chunk-libs',
                            test:/[\\/]node_modules[\\/]/,
                            priority:10,
                            chunks:'initial'
                          },
                            elementUI:{
                              name:'chunk-elementUI',
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?element-ui(.*)/
                            },
                            commons:{
                              name:'chunk-commons',
                                test:resolve('src/components'),
                                minChunks: 3,
                                priority:5,
                                reuseExistingChunk: true
                            }
                        }
                    })
                    config.optimization.runtimeChunk('single')
                }
            )
    }
}

代码只是一个格式，具体详细内容，可查看参考文献。