webpack-基础知识

const baseConfig = require("./base.config");

const webpackMerge = require("webpack-merge");
const path = require("path");

//合并
const config = webpackMerge(baseConfig, {
    /*
        mode内容webpack提供2种选择:development/production.
        每种选择webpcak都会提供的对应的默认配置
        参考网站https://segmentfault.com/a/1190000013712229?utm_source=tag-newest
    */
    mode: "development",
     /*
            devtool帮助调试,提供几种方法,将压缩或编译后的文件的代码映射回源文件中原始位置
            module.rules允许你在webpack中配置多个loader
        */
    devtool:"cheap-module-eval-source-map",
    module: {     
        rules: [
            {
                test: /\.(css|scss)$/,
                //cssloader的执行顺序 从右到左 从下到上
                use: ["style-loader", "css-loader", "sass-loader"],
                //排除文件
                exclude: path.join(__dirname, "../node_modules")
            }
        ]
    },
    //服务器的配置项
    devServer: {
        //自动打开浏览器
        open: true,
        //设置端口号
        port: 9001,
        //找不到界面就默认设置
        historyApiFallback: {
            rewrites: [{
                from: /.*/g,
                to: ‘/index.html‘ //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
            }]
        },
        //代理,处理跨域
        proxy:{
            /*
               请求地址是/api开头的时候,把请求地址代理到target设置的网址
               请求地址:域名后,问号前,比如:http://baidu.com/s?aa=1;/s是地址  ?后面是请求参数
               这种跨域不是一定成功如果有token验证就不行
            */
            "/api":{
                //代理目标点
                target:"https://app2.motie.com",
                //允许跨域代理
                changeOrigin:true,
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
})


module.exports = config;