Question

我的反应应用程序在webpack-dev-server中工作正常，但生成构建重定向到找不到页面的路由。我也尝试过hashRouter，但它会重定向到每个Route上的主页。

请让我知道我错过了什么。我对此有点新意。另外，我的构建包大约接近2mbs。我尝试了一些代码拆分但是没有用。

这是我的webpack.config.js -

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const extractSass = new ExtractTextPlugin({
    filename: "style.css",
});

module.exports = {
    entry: {
        main: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    module: {
        loaders: [  
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.s?css$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            },
            {
                test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
                loader: 'url-loader'
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(jpg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: ''
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        extractSass,
        new HtmlWebpackPlugin({
            title: 'Caching',
            template: 'index.html'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
              sequences: true,
              dead_code: true,
              conditionals: true,
              booleans: true,
              unused: true,
              if_return: true,
              join_vars: true,
              drop_console: true
            },
            mangle: {
              except: ['$super', '$', 'exports', 'require']
            },
            output: {
              comments: false
            } 
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
    ]
};

package.json文件。

{
  "name": "react-afinoz",
  "version": "1.0.0",
  "description": "Afinoz Get best and cheap Loans in Delhi, Noida",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run prod",
    "build": "webpack-dev-server --content-base src/ --inline --hot --open --history-api-fallback",
    "prod": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.1.6",
    "aws-sdk": "^2.128.0",
    "axios": "^0.16.2",
    "node-sass": "^4.5.3",
    "preload-webpack-plugin": "^2.0.0",
    "react": "^15.6.1",
    "react-cookies": "^0.1.0",
    "react-document-meta": "^2.1.2",
    "react-dom": "^15.6.1",
    "react-materialize": "^1.0.16",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "react-s3-uploader": "^4.5.0",
    "script-ext-html-webpack-plugin": "^1.8.7",
    "style-ext-html-webpack-plugin": "^3.4.3",
    "url-loader": "^0.5.9"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "compression-webpack-plugin": "^1.0.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1",
    "webpack-merge": "^4.1.0"
  }
}

index.js文件： -

import React from "react"
import ReactDOM from "react-dom" 
import { BrowserRouter,browserHistory} from 'react-router-dom'

import App from "./routes.js"
import style from "./sass/style.scss"

const main = document.getElementById('main')
ReactDOM.render((
    <BrowserRouter history={browserHistory}>
        <App />
   </BrowserRouter> 
), main);

Router.js文件： -

import React from "react"
import { Switch, Route } from 'react-router-dom'

import Home from "./home"
import Login from "./login"
import SignUp from "./signUp"
import NotFound from "./404.js"

export default class App extends React.Component{
    render(){
        return(
            <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/login' component={Login}/>
                    <Route path='/signUp' component={SignUp}/>
                    <Route path="*" component={NotFound}/>
            </Switch>       
        ); 
    }
}

Answer 1

在这里，尝试使用绝对路径而不是相对路径

＆＃13;

    	
    entry: {
        main: path.join(__dirname, './src/app.tsx'),
    }

＆＃13;

使应用程序与webpack服务器生产版本无法正常工作

1 个答案: