ওয়েবপ্যাক-ডেভ-সার্ভার অ্যাপ্লিকেশন পৃষ্ঠার পরিবর্তে ডিরেক্টরি তালিকা পরিবেশন করে


92

এখানে চিত্র বর্ণনা লিখুন

আমি কেবল আসল অ্যাপটি দেখতে পাচ্ছি /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()
  ]

};

প্রকল্পের স্তরক্রম হ'ল:

  • অ্যাপ্লিকেশন

    • জেএস
  • নোড_মডিউলস

  • পাবলিক

    • সিএসএস

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

আমি http://localhost:8080/প্রতি প্রবেশ প্রতি অ্যাপ্লিকেশনের জন্য তা নিশ্চিত করতে কীভাবে পরিবর্তন করতে পারি ?

উত্তর:


78

আপনি যদি ওয়েবপ্যাকের ডেভ সার্ভার ব্যবহার করছেন তবে আপনি /publicবেস ডিরেক্টরি হিসাবে ব্যবহারের বিকল্পগুলিতে পাস করতে পারেন ।

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

দেখুন webpack কনফিগারেশন ডক্স এবং বিশেষভাবে, webpack dev সার্ভারটি ডক্স আরও বিকল্প এবং সাধারণ তথ্যের জন্য।


4
এই উত্তরের জন্য ধন্যবাদ, এটি আমাকে আনস্টাক পেয়েছে। উভয় ডকুমেন্টেশনের লিঙ্ক পোস্ট করার জন্য ধন্যবাদ।
ক্রিস স্মিটজ

4
ওয়েবপ্যাক 2 সম্পর্কে কী? আমি ডক্সটি পড়েছি এবং এটি নিজেই বের করতে পারি না।
শক্তিশালী

@ মাইটিয়াম আপনি পাবলিকপথ সম্পত্তিও সেট করতে চান। আমি এটি অন্তর্ভুক্ত উত্তর আপডেট করব।
স্যান্ডেলগুলি

4
আমি জানি না যে কেউ কীভাবে ডকুমেন্টেশন থেকে এটি বের করতে পারে। ধন্যবাদ. সম্ভবত এই সম্পত্তিগুলিতে কিছু ডকুমেন্টেশন পুনর্লিখন বিবেচনা করুন?
পরাক্রয়াম

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'
});

এটি আমাকে ওয়েবপ্যাকের মাধ্যমে একটি অটোজেনারেটেড এইচটিএমএল পাচ্ছিল তা ঠিক করতে সহায়তা করেছিল। এখন, এই templateপ্যারামটি সেট করে আমি কোনও সমস্যা ছাড়াই আমার নিজের এইচটিএমএল নির্দিষ্ট করতে পারি। অনেক ধন্যবাদ!
ড্যানিভিকারিও

1

আমি ঘটনাক্রমে index.html অপসারণ করেছি এবং তারপরে আমি কেবল ডিরেক্টরি তালিকা পেয়েছি।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.