Tomcatは戦争とWebpackのコード分割を配備しました

Question

Webpack 2.1.0-beta.20を複数のエントリーポイントとコード分割で使用しています。

スプリットポイントは、ES6スタイルSystem.import()を使用し、アプリケーションのルーティングに基づいて発火します。これは、Webpack開発サーバーとgradle bootRunで起動されたSpring Boot組み込みTomcatで完全に動作します。この問題は、戦争にパッケージ化し、Tomcatに手動で展開するときに発生します。この場合、静的エントリポイントは期待どおりにロードされます。これらはWebpackによってindex.htmlに注入されたものです。しかし、ブラウザは「要求時負荷」チャンクを取得しようとしていません。結果はありません反応アプリケーションがdivに解決されました。

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

私はこの問題は、Tomcatの展開が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修正がbrowserHistoryインスタンスを作成するのではなくながらbasenameを追加することである

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

ちょうどそれをインポートします。これに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') 
)