webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4053字，纯文字阅读大概需要6分钟。

内容图文

webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）

比较上一篇博客的webpack.config.js文件仅更新了resolve对象；webpack配置-resolve常用配置.

const { resolve } = require("path");// 路径处理
const htmlWebpackPligins = require("html-webpack-plugin");// html模板
const { CleanWebpackPlugin } = require("clean-webpack-plugin")// 清空上次打包内容
/* 
    entry: 入口起点
    1.string --> "./src/main.js" -- 单入口
        打包形成一个chunk。输出一个bundle文件。
        chunk默认的名称是 main
    2.array --> ["./src/add.js", "./src/main.js"] -- 多入口 (用途-html不能热更新,引入html文件让HMR功能生效)
        打包形成一个chunk。输出一个bundle文件。
        chunk默认的名称是 main
    3.object --> { main: "./src/main.js", add: "./src/add.js", } -- 多入口 
        引入几个文件就生成几个chunk,同样输出同等数量的bundle文件
        此时chunk的名称为key值
    4.object[Array] --> { main: ["./src/main.js"], option: ["./src/add.js", "./src/count.js"], } -- 多入口
        一个{key:value}为一个chunk,输出一个bundle文件
        此时chunk的名称为key值
*/
module.exports = {
    // entry: "./src/main.js",
    // entry: ["./src/main.js", "./src/add.js"],
    // entry: { main: "./src/main.js", add: "./src/add.js", },
    entry: { main: ["./src/js/main.js"] },// 推荐（可以将多个包打包成一个chunk,又提高了可维护性）
    output: {
        // 文件输出名称(指定名称+目录)
        // js/ 会将对应的js文件输出到js文件夹下
        filename: "js/[name].[hash:8].js",// [name] -- entry中相应的key; [hash:8] -- 生成8位哈希值; 例: main.dff06b57.js
        // 打包后文件输出位置(将来所有资源输出的目录)
        path: resolve(__dirname, "dist"),
        // 所有资源引入的公共路径  ==> ./image/image.jpg  (./为公共路径)
        publicPath: "./",
        /* 
            入口chunk:
                entry 中定义的入口文件为入口chunk
            非入口chunk:（异步引入的文件）（懒加载的文件）
                非 entry 中定义的文件为非入口chunk
        */
        chunkFilename: "js/[name]_chunk.js", // 非入口chunk名称
        /* 抛出一个全局变量(整个库内) 在main文件中体现为 var main = 一个匿名函数 */
        /* 使用场景： 使用如dll技术，单独打包出一个包时 */
        library: "[name]",
        /* 不再使用 var 来定义变量，而是添加到 window(浏览器中) 对象中 */
        libraryTarget: "window",
        // libraryTarget: "global",// 或者 global(nodeJS中)
        // libraryTarget: "commonjs", // 将使用 commonjs 方式引入它
    },
    /* loader */
    module: {
        rules: [
            /* loader配置 */
            {
                test: /\.css$/,
                /* 多个loader配置使用use */
                use: ["style-loader", "css-loader"]
            },
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,// 排除node_modules文件夹中的文件
            //     include: resolve(__dirname, "src"),// 只检查src目录下的文件
            //     /* 优先执行(会优先执行添加此属性的loader) */
            //     enforce: "pre",
            //     /* 延后执行 */
            //     // enforce: "post",
            //     /* 单个loader使用loader */
            //     loader: "eslint-loader",
            // },
            // {
            //     /* 以下配置的相同的loader只会生效一个 */
            //     oneOf: [],
            // }
        ]
    },
    plugins: [
        new htmlWebpackPligins(),// 使用生成html模板的插件
        new CleanWebpackPlugin(),// 使用打包后删除上一次打包文件的插件
    ],
    mode: "development", // 打包模式 development 开发模式(可读性高,代码体积大)  |  production 生产模式(可读性差,代码体积小)
    /* 模块解析规则 */
    resolve: {
        /* 配置路径别名,优点:简写路径;缺点:没有提示 */
        alias: {
            $css: resolve(__dirname, "src/css")
        },
        /* 配置省略文件后缀名 */
        extensions: [".js", ".json", ".css", "jsx"],
        /* 告诉 webpack 解析模块去哪个目录找 */
        modules: [resolve(__dirname, "../../node_modules"), "node_modules"]
    },
    devServer: {
        /* 运行代码的目录 */
        contentBase: resolve(__dirname, "dist"),
        /* 监视 contentBase 目录下的所有文件,一旦文件发生变化就会 reload (重载+刷新浏览器)*/
        watchContentBase: true,
        /* 监视文件时 配合 watchContentBase */
        watchOptions: {
            /* 忽略掉的文件(不参与监视的文件) */
            ignored: /node_modules/
        },
        /* 启动gzip压缩 */
        compress: true,
        /* 运行服务时自动打开服务器 */
        open: true,
        /* 启动HMR热更新 */
        hot: true,
        /* 启动的端口号 */
        port: 5000,
        /* 启动的IP地址或域名 */
        host: "localhost",
        /* 关闭服务器启动日志 */
        clientLogLevel: "none",
        /* 除了一些启动的基本信息,其他内容都不要打印 */
        quiet: true,
        /* 如果出错不要全屏提示 */
        overlay: false,
        /* 服务器代理 --> 解决开发环境跨域问题 */
        proxy: {
            /* 一旦devServer(port:5000)服务器接收到 ^/api/xxx 的请求,就会把请求转发到另外一个服务器(target)上 */
            "/api": {
                target: "http://localhost:3000",
                /* 路径重写(代理时发送到target的请求去掉/api前缀) */
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },
}

内容总结

以上是互联网集市为您收集整理的webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）全部内容，希望文章能够帮你解决webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---