Webpack загружается с неправильного URL-адреса при изменении пути

Question

Я пишу приложение для реагирования, и все работает нормально, когда я перехожу на localhost:3000, но когда я пытаюсь перейти на localhost:3000/foo/page, я получаю сообщение об ошибке, которое сообщает мне localhost: 3000 /foo/bundle.js нельзя загрузить.

Для меня это похоже на проблему с Webpack, которая выглядит не в том месте для bundle.js, но я не уверен. Как я могу заставить приложение всегда смотреть на localhost:3000 для bundle.js?

Это часть моей конфигурации веб-пакета.

var TARGET = process.env.npm_lifecycle_event; 
var ROOT_PATH = path.resolve(__dirname); 
var APP_PATH = path.resolve(ROOT_PATH, 'app'); 
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist'); 

process.env.BABEL_ENV = TARGET; 
var common = { 
    entry: APP_PATH, 

    output: { 
     path: BUILD_PATH, 
     filename: 'bundle.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loaders: ['babel'], 
       include: APP_PATH 
      }, 
      { 
       test: /\.svg$/, 
       loader: 'url-loader?limit=8192', 
       include: APP_PATH 
      }, 
      { 
       test: /\.png$/, 
       loader: 'url-loader?limit=8192', 
       include: APP_PATH 
      }, 
      { 
       test: /\.ico$/, 
       loader: 'url-loader?limit=8192', 
       include: APP_PATH 
      } 
     ] 
    }, 

    plugins: [ 
     new HtmlWebpackPlugin({ 
      title: 'foobar', 
      template: path.resolve(APP_PATH, 'index.html'), 
      favicon: path.resolve(APP_PATH, 'images', 'favicon.ico') 
     }) 
    ] 
}; 

if (TARGET === 'start' || !TARGET) { 
    module.exports = merge(common, { 
     devtool: 'eval-source-map', 
     module: { 
      loaders: [ 
       { 
        test: /\.scss$/, 
        loaders: ['style', 'css', 'sass'], 
        include: APP_PATH 
       } 
      ] 
     }, 
     devServer: { 
      historyApiFallback: true, 
      hot: true, 
      inline: true, 
      port: 3000, 
      progress: true 
     }, 
     plugins: [ 
      new webpack.HotModuleReplacementPlugin() 
     ] 
    }); 
} 

Answer 1

Добавить output.publicPath: '/' в конфигурацию вашего webpack.

output: { 
    path: BUILD_PATH, 
    publicPath: '/', 
    filename: 'bundle.js' 
} 

HtmlWebpackPlugin скорее всего, создает файл, который есть:

<script src="bundle.js"></script> 

Настройка output.publicPath: '/' сделает это:

<script src="/bundle.js"></script> 

С Webpack Config страницы:

output.publicPath

PublicPath указывает общедоступный URL-адрес выходных файлов при ссылке в браузере. Для загрузчиков, которые встраивают или теги или ссылочные объекты, такие как изображения, publicPath - , используемый в качестве href или url() для файла, когда он отличается от их местоположения на диске (как указано в пути). Это может быть полезно, если вы хотите разместить некоторые или все выходные файлы в другом домене или на CDN . Webpack Dev Server также принимает подсказку от publicPath, используя его , чтобы определить, где можно отсылать выходные файлы. Как и для пути, вы можете использовать подменю [hash] для лучшего профиля кеширования.