Tomcat이 war 및 Webpack 코드 분할을 배포했습니다.

Question

여러 개의 진입 점과 코드 분할로 Webpack 2.1.0-beta.20을 사용하고 있습니다.

분할 지점은 ES6 스타일 System.import()을 사용하고 있으며 응용 프로그램의 라우팅에 따라 실행됩니다. 이것은 Webpack dev 서버와 gradle bootRun으로 시작된 Spring Boot 임베디드 Tomcat에서 완벽하게 작동합니다. 전쟁에 패키지를 만들고 Tomcat에 수동으로 배포 할 때 문제가 발생합니다. 이 경우 정적 진입 점이 예상대로로드됩니다. 이것들은 Webpack에 의해 index.html에 주입 된 것들입니다. 그러나 브라우저는 "주문형로드"청크를 검색하려고 시도하지 않습니다. 결과가 없습니다. React 애플리케이션이 div로 해결되었습니다.

<div> <!-- react-empty: 1 -->

나는 문제가 톰캣 배포는 URL의 응용 프로그램 이름과 전쟁의 이름을 사용한다는 것입니다 생각합니다. 다른 실행 구성에서는 그렇지 않습니다.

http://localhost:8080/ 대는 http://localhost:8080/app-name

모든 리소스를 찾을 실패하지 않습니다. URL에서 첫 번째 청크 번들을 가져올 수 있습니다. 그것은 Webpack 같은 노력을로드하지 않습니다. path 및 publicPath에 많은 변형을 시도했습니다. 또한 __webpack_public_path__ 시도했습니다. 그러나 그것은 찾기에 문제가없는 것처럼 보입니다. 대신 어떤 이유로 Webpack은 청크를 전혀로드하지 않습니다.

의견을 보내 주셔서 감사합니다.

가 webpack.config.js

const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

const PATHS = { 
    app: './app/index.js', 
    html: './app/index.html', 
    src: path.resolve(__dirname, 'app'), 
    dist: path.resolve(__dirname, 'dist'), 
    routes: path.resolve(__dirname, 'app/routes') 
} 

const DEV_PORT = '4000' 
const SSL_PORT = '8543' 
const HOST = '127.0.0.1' 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: PATHS.html, 
    filename: 'index.html', 
    inject: 'body' 
}) 

module.exports = env => { 
    return { 
    entry: { 
     hmr: getHmrEntry(), 
     js: PATHS.app, 
     route: PATHS.routes + '/routes.js', 
     vendor: [ 
     'react', 
     'react-router', 
     'react-dom', 
     'babel-polyfill' 
     ] 
    }, 

    output: { 
     filename: '[name].bundle.js', 
     chunkFilename: '[id].bundle.js', 
     path: PATHS.dist, 
     publicPath: getPublicPath() 
    }, 

    context: __dirname, 

    resolve: { 
     modules: [path.resolve(__dirname, '.'), 'node_modules'] 
    }, 

    devtool: env.prod ? 'eval' : 'inline-source-map', 

    bail: env.prod, 

    externals: { 
     'cheerio': 'window', 
     'react/lib/ExecutionEnvironment': true, 
     'react/lib/ReactContext': true 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /(\.js|\.jsx)$/, 
      exclude: /node_modules/, 
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-2', 'eslint'] 
     }, 
     { 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: ['css'] 
      }) 
     } 
     ] 
    }, 

    plugins: [ 
     HtmlWebpackPluginConfig, 

     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: Infinity, 
     filename: 'vendor.bundle.js' 
     }), 

     new ExtractTextPlugin({ 
     filename: '[name].[id].style.css', 
     allChunks: false 
     }) 
    ], 

    devServer: { 
     contentBase: PATHS.dist, 
     port: DEV_PORT, 
     historyApiFallback: true 
    } 
    } 

    function getPublicPath() { 
    // var prodPath = 'https://' + HOST + ':' + SSL_PORT + '/react-app/' 
    var prodPath = '/react-app/' 
    // var devPath = 'http://' + HOST + ':' + PORT + '/dist/' 
    var devPath = '/dist/' 
    var publicPath 

    if (env.prod) { 
     publicPath = prodPath 
    } else { 
     publicPath = devPath 
    } 
    return publicPath 
    } 

    function getHmrEntry() { 
    var hmr = [] 
    if (!env.prod) { 
     hmr = [ 
     'webpack-dev-server/client?http://' + HOST + ':' + DEV_PORT, 
     'webpack/hot/only-dev-server' 
     ] 
    } 
    return hmr 
    } 
} 

하는 index.js

import 'babel-polyfill' 
import React from 'react' 
import { render } from 'react-dom' 
import { Router, browserHistory } from 'react-router/es6' 
import rootRoute from './routes/routes' 
import '../style/common.css' 
// __webpack_public_path__ = window.resourceBaseUrl + '/react-app/' 

render(
    <Router history={browserHistory} routes={rootRoute} />, 
    document.getElementById('root') 
) 

routes.js

import App from '../containers/App' 

function errorLoading (err) { 
    console.error('Dynamic page loading failed', err) 
} 

function loadRoute (cb) { 
    return (module) => cb(null, module.default) 
} 

export default { 
    component: App, 
    childRoutes: [ 
    { 
     path: '/', 
     getComponent (location, cb) { 
     System.import('./Home') 
      .then(loadRoute(cb)) 
      .catch(errorLoading) 
     } 
    }, 
    { 
     path: 'about', 
     getComponent (location, cb) { 
     System.import('./About') 
      .then(loadRoute(cb)) 
      .catch(errorLoading) 
     } 
    }, 
    { 
     path: 'feature', 
     getComponent (location, cb) { 
     System.import('./Feature') 
      .then(loadRoute(cb)) 
      .catch(errorLoading) 
     } 
    } 
    ] 
} 

Answer 1

수정이 browserHistory 인스턴스를 생성하기보다는 동안 basename를 추가하는 것 그냥 가져 오기만하면됩니다. 이것에 index.js 위의 변경 :이 토론에 참여 사람에

import 'babel-polyfill' 
import React from 'react' 
import { render } from 'react-dom' 
import { Router } from 'react-router/es6' 
import { createHistory, useBasename } from 'history' 
import rootRoute from './routes/routes' 
import '../style/common.css' 

const browserHistory = useBasename(createHistory)({ 
    basename: '/react-app' 
}) 

render(
    <Router history={browserHistory} routes={rootRoute} />, 
    document.getElementById('root') 
) 

감사합니다 - https://github.com/reactjs/react-router/issues/353

Answer 2

가 위와 같이 history 사용은 더 이상 사용되지 않습니다. 다음은 최신 버전입니다.

import 'babel-polyfill' 
import { render } from 'react-dom' 
import React from 'react' 
import { Router, useRouterHistory } from 'react-router/es6' 
import { createHistory } from 'history' 
import rootRoute from './routes/routes' 
import '../style/common.css' 

const browserHistory = useRouterHistory(createHistory)({ basename: '/react-app' }) 

render(
    <Router history={browserHistory} routes={rootRoute} />, 
    document.getElementById('root') 
)