如何將react項目build的靜態文件，放到javaweb項目中，使用tomcat運行

歡迎分享，註明版權便可。

整體架構

前端：react技術棧
後端：srping+springmvc+mybatis

問題：

若是不想將前端項目單獨部署，而是想要將打包後的靜態文件放到後臺項目中，而後經過tomcat部署，可行嗎？
答案：徹底沒問題

本人成功經驗以下：
1、

前端項目經過create-react-app + react-router4 + antd
使用Facebook官方提供的cli工具建立項目，屏蔽掉本身建立時關於webpack的一對問題，在cli基礎上按我的須要自定義配置便可。
打包時，修改config下的paths.js
修改的路徑對應須要在java項目中的靜態文件路徑，好比個人是

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);
}

2、針對使用react-router時，形成的刷新頁面404問題
配置

<error-page>
    <error-code>404</error-code>
    <location>/static/index.html</location>
</error-page>

3、修改webpack配置文件時，注意dev和prod兩個文件都要修改，同時兩個配置文件關於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`.
},

其餘待補充。。。