一、直接上代码

let path = require('path')
let glob = require('glob')

function resolve(dir) {
    return path.join(__dirname, `src/${dir}`)
}

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
        },
    },
    runtimeCompiler: true,
    publicPath: './', // 解决打包之后静态文件路径404的问题
    devServer: {
        open: true /* 自动打开浏览器 */,
        port: 8082,
        // index: '/index.html', // 默认启动页面
        client: {
            //当出现编译错误或警告时，在浏览器中是否显示全屏覆盖。  示例为只显示错误信息
            overlay: {
                runtimeErrors: false,
            },
        },
    },
    productionSourceMap: false,
    chainWebpack: config => {
        // file-loader排除svg图标目录，避免file-loader处理svg图标引发webpack报错
        config.module.rule('svg').exclude.add(resolve('assets/icons/svg')).end()

        // 生成 svg 雪碧图
        config.module
            .rule('svgSpriteLoader')
            .test(/\.svg$/)
            .include.add(resolve('assets/icons/svg'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            })
            //   // 自动修复eslint报错
            //   .rule('eslint')
            //   .use('eslint-loader')
            //   .options({
            //       fix: true
            //   })
            .end()
    },
    //     // 自动修复eslint报错
    //     config.module.rule('eslint').use('eslint-loader').options({
    //         fix: true,
    //     })
    // },
}

自取吧