webpackでbrowserHistoryの作業を行う方法

Question

const webpack = require('webpack'), 
path = require('path'); 
module.exports = { 
    context: __dirname, 
    entry: { 
    // 'landingPages': path.resolve(__dirname, 'app/landingPages'), 
    'merchant': path.resolve(__dirname, 'app/merchant') 
}, 
output: { 
    filename: 'build/[name].js', 
    chunkFilename: 'build/chunks/[hash]_[name].js', 
}, 
watch: true, 
    // cache: true, 
    // debug: true, 
    // devtool: true, 
    module: { 
    rules: [ 
    { 
     test: /app.*\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     use: [ 
     { 
     loader: 'babel-loader', 
     options:{ 
      presets: ['es2015', 'react', 'stage-2'], 
      plugins: ['react-html-attrs'], 
     } 
     }, 
     // 'eslint-loader' 
     ] 
    }] 
    }, 
    resolve: { 
    // resolver: path.resolve('./'), 
    modules: [ 
    path.join(__dirname, "app"), 
    'node_modules' 
    ], 
    extensions: ['.js', '.jsx'], 
    alias: { 
     sharedAssets: 'app/sharedAssets', 
     gaService: 'app/Google/gaService.js', 
     css: 'media/css' 
    } 
    } 
}; 

私は、app/merchant内のindex.jsファイルを使用するようにリダイレクトしています。私はURLにリダイレクトする場合

は、それは私に

警告を示しています[反応-ルータ]ロケーション "/反応/アプリ/商人/" 任意のルートに

フォルダ構造と一致しませんでした：

以下を追加するには、WebPACKのでは

Answer 1

を助けてくださいそれは基本的に何

devServer: { 
    historyApiFallback: true 
} 

は、デフォルトではindex.htmlを返却して、すべてのルーティングがベースとしてこれを考慮して行われています。ウェブパックの設定は次のようになります

const webpack = require('webpack'), 
path = require('path'); 
module.exports = { 
    context: __dirname, 
    entry: { 
    // 'landingPages': path.resolve(__dirname, 'app/landingPages'), 
    'merchant': path.resolve(__dirname, 'app/merchant') 
}, 
output: { 
    filename: 'build/[name].js', 
    chunkFilename: 'build/chunks/[hash]_[name].js', 
}, 
devServer: { 
    historyApiFallback: true 
}, 
watch: true, 
    // cache: true, 
    // debug: true, 
    // devtool: true, 
    module: { 
    rules: [ 
    { 
     test: /app.*\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     use: [ 
     { 
     loader: 'babel-loader', 
     options:{ 
      presets: ['es2015', 'react', 'stage-2'], 
      plugins: ['react-html-attrs'], 
     } 
     }, 
     // 'eslint-loader' 
     ] 
    }] 
    }, 
    resolve: { 
    // resolver: path.resolve('./'), 
    modules: [ 
    path.join(__dirname, "app"), 
    'node_modules' 
    ], 
    extensions: ['.js', '.jsx'], 
    alias: { 
     sharedAssets: 'app/sharedAssets', 
     gaService: 'app/Google/gaService.js', 
     css: 'media/css' 
    } 
    } 
};