web-dev-qa-db-ja.com

Webpack-dev-serverは、アプリページの代わりにディレクトリリストを提供します

enter image description here

実際のアプリは/publicでのみ表示できます。

webpack.config.jsの設定は次のとおりです。

var path    = require('path');
var webpack = require('webpack');

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

プロジェクト階層は次のとおりです。

  • アプリ

    • js

  • node_modules

  • 公

    • cSS

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

http://localhost:8080/エントリがアプリケーション自体のものであることを確認するためにどのように変更できますか？

node.jsreactjswebpackreactjs-fluxwebpack-dev-server
77
Jason Lam

Webpackの開発サーバーを使用している場合は、/publicをベースディレクトリとして使用するオプションを渡すことができます。

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
},

その他のオプションと一般情報については、 webpack設定ドキュメント 、特に webpack devサーバードキュメント を参照してください。

66
Sandals

--content-baseフラグを起動スクリプトに追加することもできます。

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }
15
kcstricks

私の場合、HTMLWebpackPluginをセットアップしたときに'index.html'のスペルを間違えました。このプラグインを使用している場合は、ファイル名を再確認してください。

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
3
spencer.sm

Index.htmlを誤って削除してしまったので、ディレクトリリストのみを取得しました。

0
Tobias K