【前言】

在vue/cli 3.x之后对webpack进行了封装，不能直观地对webpack进行配置，但是官方对如何进行webpack配置做了说明，这里基于vue/cli 4.4.1做个总结。

【本文目录】

1. 前期准备
2. 入口文件配置
3. 出口文件配置
4. loader配置
5. plugin配置
6. proxy配置
7. 端口号修改

【前期准备】

1. 首先通过vue/cli 新建一个项目（这里就不多说了）
2. 在根目录下新建一个vue.config.js文件(所有的webpack配置修改都通过该文件传递)。
3. 执行如下命令，查看默认webpack配置(之后看有没有修改成功，都可以通过执行该命令后的output.js文件查看)

vue inspect > output.js

入口文件配置

1. 新增一个入口

module.exports = {
    chainWebpack: config => {
        config
            .entry('app')   //entry 的key值
                .add('./src/testMain.js') //添加一个entry路径
                .end() //通过end回到最高层次的上下文环境，这里回到了config
    },
}

2. 删除默认入口（这里需要新添加一个入口，webpack至少需要一个入口, 这里其实达到了修改默认入口的效果）

module.exports = {
    chainWebpack: config => {
        config.entryPoints.clear();
        config
            .entry('app')   //entry 的key值
                .add('./src/testMain.js') //添加一个entry路径
                .end() //通过end回到最高层次的上下文环境，这里回到了config
    },
}

3. 删除默认入口的某个路径

module.exports = {
    chainWebpack: config => {
        config.entryPoints.clear();
        config
            .entry('app')   //entry 的key值
                .add('./src/testMain.js') //添加一个entry路径
                .add('./src/testMain2.js') //添加一个entry路径
                .end() //通过end回到最高层次的上下文环境，这里回到了config
            .entry('app')
                .delete('./src/testMain2.js') //删除后只剩下./src/testMain.js了
    }
}

出口文件配置

const path = require('path');
module.exports = {
    chainWebpack: config => {
        config
            .output
                .publicPath('/') //修改publicPath
                .filename('[name].bundle.js') // 修改filename
    },
    outputDir: path.resolve(__dirname, 'dist') // vue/cli官方规定path不能用webpack-chain中的config.output.path去修改，需要通过outputDir定义
}

loader配置

module.exports = {
    chainWebpack: config => {
        config.module   //匹配loader
            .rule('css2') // rule的key值，用于确定那个rule，比如css就是config.module.rule('css')
            .test(/test/) // 匹配路径
            .include //包含的路径
                .add('src')
                .add('test');

        config.module //修改loader的执行顺序
            .rule('css2')
            .test(/test/)
            .pre() // pitching(和正常执行顺序相反)执行顺序 post, inline, normal, pre
            .post()
            .enforce('pre')

        config.module   //修改loader的oneOf以及修改loader的配置参数options
            .rule('css2')
            .oneOf('inline')// oneOf的key值用于确定哪个oneOf
                .resourceQuery(/inline/) //模块的查询参数
                .use('url') //具名规则
                    .loader('url-loader') //使用的loader
                    .options({ somekey: ['someArgs'] })// 创建配置项
                    .end()
                .use('url')
                    .tap(options => { //合并配置项
                            return Object.assign(options, {
                                somekey: ['someArgsChange']
                            })
                        })
                    .end()
                .use('url2') //在use数组里再添加一个loader
                    .loader('url-loader2')
                    .options({ somekey: ['someArgs2'] })// 创建配置项
                    .end()
                .end()
            .oneOf('external')
                .resourceQuery(/external/)
                .use('file')
                    .loader('file-loader');
            config.module //在某个loader之前或之后插入loader
              .rule('less')// 找到目标规则
              .oneOf('normal')// 找到oneof下的规则，vue中通过`vue inspect > output.js`生成的文件会有相应提示
              .use('px2rem-loader')// 给你的规则具名
              .after('css-loader')// 这里用before或用after在某个规则前或规则后插入loader
              .loader('px2rem-loader')// 使用的的loader
              .options({ // 配置项
                remUnit: 75,
              });
    },
}

plugin配置

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

module.exports = {
    chainWebpack: config => {
        config  //添加plugin
            .plugin('somePluginName') //具名规则
            .use(HtmlWebPackPlugin, [{ //使用插件
                'someArgsName': 'someArgs'
            }, {
                'someArgsNameB': 'someArgsB'
            }])
            .tap(args => { //修改某个plugin配置参数
                const index = args.findIndex(item => item.hasOwnProperty('someArgsName'));
                args.splice(index, 1);
                return args
            })

        config  //删除plugin
            .plugins
            .delete('somePluginName')
    },
}

反向代理配置和端口号配置

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

参考文献

juejin.cn/post/684490…

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

github.com/neutrinojs/…