摘要：歡迎分享，注明版權(quán)即可。打包時(shí)，修改下的修改的路徑對(duì)應(yīng)需要在項(xiàng)目中的靜態(tài)文件路徑，比如我的是原始的配置二針對(duì)使用時(shí)，造成的刷新頁(yè)面問(wèn)題配置三修改配置文件時(shí)，注意和兩個(gè)文件都要修改，同時(shí)兩個(gè)配置文件關(guān)于的配置并不太一樣。

總體架構(gòu)

前端：react技術(shù)棧
后端：srping+springmvc+mybatis

問(wèn)題：

如果不想將前端項(xiàng)目多帶帶部署，而是想要將打包后的靜態(tài)文件放到后臺(tái)項(xiàng)目中，然后通過(guò)tomcat部署，可行嗎？
答案：完全沒(méi)問(wèn)題

本人成功經(jīng)驗(yàn)如下：
一、

前端項(xiàng)目通過(guò)create-react-app + react-router4 + antd
使用Facebook官方提供的cli工具創(chuàng)建項(xiàng)目，屏蔽掉自己創(chuàng)建時(shí)關(guān)于webpack的一對(duì)問(wèn)題，在cli基礎(chǔ)上按個(gè)人需要自定義配置即可。
打包時(shí)，修改config下的paths.js
修改的路徑對(duì)應(yīng)需要在java項(xiàng)目中的靜態(tài)文件路徑，比如我的是

WEB-INF/static

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    // envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/"); 原始的配置
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/static");
  return ensureSlash(servedUrl, true);
}

二、針對(duì)使用react-router時(shí)，造成的刷新頁(yè)面404問(wèn)題
配置

    404
    /static/index.html

三、修改webpack配置文件時(shí)，注意dev和prod兩個(gè)文件都要修改，同時(shí)兩個(gè)配置文件關(guān)于loader的配置并不太一樣。

//dev中
{
    test: /.less$/,
    use: [
        require.resolve("style-loader"),
        require.resolve("css-loader"),
        {
            loader: require.resolve("postcss-loader"),
            options: {
                ident: "postcss", // https://webpack.js.org/guides/migrating/#complex-options
                plugins: () => [
                    require("postcss-flexbugs-fixes"),
                    autoprefixer({
                        browsers: [
                            ">1%",
                            "last 4 versions",
                            "Firefox ESR",
                            "not ie < 9", // React doesn"t support IE8 anyway
                        ],
                        flexbox: "no-2009",
                    }),
                ],
            },
        },
        {
            loader: require.resolve("less-loader"),
            options: {
                modifyVars: {"@primary-color": "#1DA57A"},//改變顏色
            },
        },
    ],
},
//prod中
{
    test: /.(css|less)/,
    loader: ExtractTextPlugin.extract(
        Object.assign(
            {
                fallback: require.resolve("style-loader"),
                use: [
                    {
                        loader: require.resolve("css-loader"),
                        options: {
                            importLoaders: 1,
                            minimize: true,
                            sourceMap: true,
                        },
                    },
                    {
                        loader: require.resolve("postcss-loader"),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: "postcss",
                            plugins: () => [
                                require("postcss-flexbugs-fixes"),
                                autoprefixer({
                                    browsers: [
                                        ">1%",
                                        "last 4 versions",
                                        "Firefox ESR",
                                        "not ie < 9", // React doesn"t support IE8 anyway
                                    ],
                                    flexbox: "no-2009",
                                }),
                            ],
                        },
                    },
                    {
                        loader: require.resolve("less-loader"),
                        options: {
                            modifyVars: {"@primary-color": "#1DA57A"},//改變顏色
                        },
                    },
                ],
            },
            extractTextPluginOptions
        )
    ),
    // Note: this won"t work without `new ExtractTextPlugin()` in `plugins`.
},

其他待補(bǔ)充。。。