のWebPACKのdevのサーバーの上映〜/ブラウザ

Question

で私はセットアップ（リアクトのためのホットロードで）自分のアプリケーションのためのWebPACK devのサーバーを持っていますが、私はhttp://localhost:8080を訪れたとき、私が見るすべては

〜/

です画面上に

npm startを実行すると、ビルドに成功したことが示されます。私はdistフォルダ（バンドルからServerDにされていた）でindex.htmlファイルを置いていなかったことを発見し

// hack for Ubuntu on Windows 
try { 
    require('os').networkInterfaces(); 
} 
catch (e) { 
    require('os').networkInterfaces =() => ({}); 
} 

const path = require('path'); 
const webpack = require("webpack"); 

module.exports = { 
    devServer: { 
     hot: true, 
     contentBase: path.resolve(__dirname, 'dist'), 
     publicPath: '/' 
    }, 
    devtool: 'inline-source-map', 
    entry: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/app/index.js' 
    ], 
    module: { 
     rules: [{ 
      test: /\.js?$/, 
      use: ['babel-loader'], 
      exclude: /node_modules/ 
     },{ 
      test: /\.jsx?$/, 
      use: ['babel-loader?' + JSON.stringify({ 
       presets: ["es2015", "stage-2", "react"] 
      })], 
      exclude: /node_modules/ 
     },{ 
      test: /\.css?$/, 
      use: ['style-loader','css-loader?modules'] 
     },{ 
      test: /\.jpg?$/, 
      use: ['file-loader'] 
     },{ 
      test: /\.ico$/, 
      use: ["file-loader"] 
     },{ 
      test: /\.png$/, 
      use: ["url-loader?limit=100000"] 
     },{ 
      test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
      use: ["url-loader?limit=10000&mimetype=application/font-woff"] 
     },{ 
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
      use: ["url-loader"] 
     },{ 
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
      use: ["file-loader"] 
     },{ 
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
      use: ["url-loader?limit=10000&mimetype=image/svg+xml"] 
     }] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('dev') 
      } 
     }), 
     new webpack.HotModuleReplacementPlugin(), 
     // enable HMR globally 

     new webpack.NamedModulesPlugin() 
     // prints more readable module names in the browser console on HMR updates 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx', '.css'] 
    } 
}; 

Answer 1

：私は、以下のWindows 10上でバッシュを経由して、これを構築することは、私のwebpack.config.jsファイルですよ。