वेबपैक-देव-सर्वर ऐप पेज के बजाय एक निर्देशिका सूची प्रदान करता है


93

यहां छवि विवरण दर्ज करें

मैं केवल वास्तविक एप्लिकेशन को देख सकता हूं /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/प्रवेश प्रति सेगमेंट के लिए है?

जवाबों:


79

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

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

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


1
इस उत्तर के लिए धन्यवाद, यह मुझे मिला। दोनों दस्तावेज़ों के लिंक पोस्ट करने के लिए भी धन्यवाद।
क्रिस शमित्ज़

3
Webpack 2 के बारे में क्या? मैं डॉक्स पढ़ता हूं और यह स्वयं पता नहीं लगा पाता।
मय्यम

@mightyiam आप सार्वजनिक संपत्ति भी सेट करना चाहते हैं। मैं उसे शामिल करने के लिए जवाब देने के लिए अपडेट करूंगा।
सैंडल

1
मुझे नहीं पता कि कोई भी इसे प्रलेखन से कैसे समझ सकता है। धन्यवाद। शायद उन गुणों पर प्रलेखन में से कुछ को फिर से लिखने पर विचार करें?
मय्यम

17

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

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

4

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

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

इससे मुझे इस तथ्य को ठीक करने में मदद मिली कि मुझे वेबपैक द्वारा एक ऑटोजेनरेटेड HTML मिल रहा था। अब, इस templateपरम को स्थापित करके मैं अपना स्वयं का html निर्दिष्ट कर सकता हूं जिसमें कोई समस्या नहीं है। आपका बहुत बहुत धन्यवाद!
डेनिविकारियो

1

मैंने गलती से index.html हटा दिया था और तब मुझे केवल निर्देशिका सूची मिली थी।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.