vue3.0+的webpack配置，配置简单实用的vue.config.js

一、webpack是什么？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

二、使用步骤

1.创建文件vue.config.js

这个文件名是固定的，也可以改配置再修改该文件名

2.配置webpack

代码如下（示例）：

const path = require('path');
const resolve = dir => path.join(__dirname, dir);

module.exports = {
     
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置别名
    chainWebpack: (config) => {
     
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
     
        // 本地ip地址
        host: 'localhost',
        port: 2333,
        open: true,
        /* 使用代理 */
        proxy: {
     
            '/api': {
     
                /* 目标代理服务器地址 */
                target: 'http://192.168.1.126:8080/',
                /* 允许跨域 */
                changeOrigin: true,
                ws: true,
                pathRewrite: {
     
                    '^/api': ''
                }
            }
        }
    },

};

总结

good night