Webpack-dev-server ให้บริการรายการไดเร็กทอรีแทนหน้าแอพ

/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

  มัด js

  index.html

• package.json

• webpack.config.js

ฉันจะแก้ไขเพื่อให้แน่ใจว่าhttp://localhost:8080/รายการนั้นมีไว้สำหรับแอปพลิเคชันต่อ se ได้อย่างไร?

หากคุณใช้เซิร์ฟเวอร์ dev ของ webpack คุณสามารถส่งผ่านตัวเลือกเพื่อใช้/publicเป็นไดเร็กทอรีฐานได้

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

ดูเอกสารการกำหนดค่า webpackและโดยเฉพาะเอกสารเซิร์ฟเวอร์ webpack devสำหรับตัวเลือกเพิ่มเติมและข้อมูลทั่วไป

คุณยังสามารถเพิ่ม--content-baseแฟล็กในสคริปต์เริ่มต้นของคุณได้เช่น

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

ในกรณีของฉันฉันสะกดผิด'index.html'เมื่อตั้งค่าไฟล์HTMLWebpackPlugin. ตรวจสอบชื่อไฟล์ของคุณอีกครั้งหากคุณกำลังใช้ปลั๊กอินนี้

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

ฉันได้ลบ index.html โดยไม่ได้ตั้งใจจากนั้นฉันก็ได้รับเฉพาะรายการไดเรกทอรี