0
我使用的WebPack 2.1.0-beta.20有多個入口點和代碼分裂。Tomcat的部署戰爭的WebPack代碼分裂
分割點使用基於應用程序的路由ES6風格System.import()和火災。這工作完全在的WebPack dev的服務器上，並與gradle bootRun推出了春季啓動嵌入式的Tomcat。當打包成war並在Tomcat上手動部署時，問題就出現了。在這種情況下，靜態入口點按預期加載。這些注入index.html通過的WebPack的人。但瀏覽器顯示沒有嘗試檢索「按需加載」塊。結果是沒有React應用程序解析到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
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)
}
}
]
}
剛打我問題是我的路線路徑。我需要將該應用程序上下文路徑添加到該URL。 – RnR