Webpack-देव-सर्वर एक निर्देशिका सूची के बजाय एप्लिकेशन पेज

Question

मैं केवल /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

• सार्वजनिक

  • सीएसएस

  • img

  bundle.js

  index.html

• package.json

• webpack.config.js

कैसे मुझे यकीन है कि http://localhost:8080/ प्रवेश आवेदन से प्रति के लिए है बनाने के लिए संशोधित कर सकते हैं?

Answer 1

यदि आप वेबपैक के देव सर्वर का उपयोग कर रहे हैं तो आप बेस निर्देशिका के रूप में /public का उपयोग करने के लिए विकल्पों में जा सकते हैं।

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

webpack configuration docs, और विशेष रूप से अधिक विकल्प और सामान्य जानकारी के लिए webpack dev server docs देखें।

Answer 2

आप अपनी स्टार्ट-अप स्क्रिप्ट में --content-base ध्वज भी जोड़ सकते हैं, उदा।

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

Answer 3

मेरे मामले में, मैं 'index.html' जब मैं HTMLWebpackPlugin की स्थापना की गलत वर्तनी। यदि आप इस प्लगइन का उपयोग कर रहे हैं तो अपने फ़ाइल नामों को दो बार जांचें।

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