2016-06-30 103 views
3

構建應用程序後不能正常工作的路由陣營路由使用構建應用程序的WebPack陣營使用的WebPack

的路線,當我使用的WebPack服務器上運行的應用程序工作正常(NPM開始)

後不工作webpack.config文件

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     'index': [ 
      'webpack-dev-server/client?http://localhost:8080/', 
      'webpack/hot/only-dev-server', 
      './index.jsx' 
     ] 
    }, 
    output: { 
     path: __dirname, 
     filename: "[name].js", 
     publicPath: 'http://localhost:8881/', 
     chunkFilename: '[id].chunk.js', 
     sourceMapFilename: '[name].map' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx', '.es6'], 
     modulesDirectories: ['node_modules'] 
    }, 
    module: { 
     loaders: [ 
      {test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/}, 
      {test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass'} 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ], 
    devtool: "eval-source-map", 
    devServer: { 
     port: 8080, 
     historyApiFallback: { 
      index: '/' 
     } 
    }, 
    externals: { 
     'Config': JSON.stringify({ 
      serverUrl: "http://pss/", 
      authSuccessUrl: "http://localhost:8881/loginSuccess", 
      podioClientId: "property-seller-solutions" 
     }) 
    } 
}; 

的package.json文件:

{ 
    "name": "pss", 
    "version": "0.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --config ./webpack.config.js --hot --port 8080" 
    }, 
    "author": "", 
    "license": "BSD-2-Clause", 
    "devDependencies": { 
    "babel": "~6.5.2", 
    "babel-core": "~6.9.1", 
    "babel-loader": "~6.2.4", 
    "babel-preset-es2015": "~6.9.0", 
    "babel-preset-react": "~6.5.0", 
    "babel-preset-stage-0": "~6.5.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-html-replace": "^1.6.1", 
    "gulp-react": "^3.1.0", 
    "gulp-uglify": "^1.5.4", 
    "history": "~3.0.0", 
    "react": "~15.1.0", 
    "react-dom": "~15.1.0", 
    "react-hot-loader": "~1.3.0", 
    "webpack": "~1.13.1", 
    "webpack-dev-server": "~1.14.1" 
    }, 
    "dependencies": { 
    "chart.js": "^2.1.6", 
    "connect-history-api-fallback": "~1.2.0", 
    "halogen": "^0.2.0", 
    "highcharts": "^4.2.5", 
    "react-d3-basic": "^1.6.11", 
    "react-infinite-scroll-component": "^1.4.1", 
    "react-infinite-scroll-es2015": "^1.0.0" 
    } 
} 

.htaccess文件:

RewriteBase/
RewriteRule ^index\.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L] 

構建應用程序(的WebPack --hot --inline)後,有兩個輸出文件 - index.js和index.html

我複製這兩個文件和.htaccess文件放到我的本地主機根文件夾中。

指數路線是工作的罰款。(http://localhost),但是當我試圖重定向到http://localhost/home它顯示「404未找到」錯誤(所請求的URL /家在此服務器上找到。)

這些路線的時候我正在使用的WebPack服務器應用程序工作正常(NPM開始) - http://localhost:8080/home

回答

3

工作。

用下面的代碼的.htaccess:

RewriteEngine On 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 

RewriteRule^/index.html [L] 

,並用於下列終端命令,生成使用的WebPack項目:

webpack --inline --history-api-fallback --progress -p 
0

訪問/回家時,您需要配置您的應用程序的index.html服務。