บันเดิล webpack ล้มเหลวในการรีโหลด?

ฉันคิดว่าปัญหาไม่ได้อยู่ที่การกำหนดค่าเราเตอร์แบบโต้ตอบ แต่ดัชนี.html ของฉันตรวจไม่พบสคริปต์ของฉัน นี่เป็นข้อผิดพลาดของฉัน:

ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบกลับด้วยสถานะ 404 (ไม่พบ)

นี่คือรหัสกำหนดค่า webpack ของฉัน:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.js$/,
      },  
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      }
    ],
  },
  output: {filename: 'app.js', path: '/'},
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true},
  historyApiFallback: {
    index: 'index.html' 
  } 
});

และ index.html ของฉัน

<!doctype html>
<html lang="en" data-framework="relay">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
    <title>Relay • TodoMVC</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      // Force `fetch` polyfill to workaround Chrome not displaying request body
      // in developer tools for the native `fetch`.
      self.fetch = null;
    </script>
    <script src="http://localhost:4000/webpack-dev-server.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

ช่วย?


webpack reactjs javascript webpack-dev-server webpack-2
person gpbaculio    schedule 13.08.2017    source แหล่งที่มา
comment
คุณตั้งค่า historyApiFallback ให้เป็นจริงได้ไหม   -  person Govind Rai    schedule 13.08.2017
comment
@GovindRai ขอบคุณ ทำงานแล้ว   -  person gpbaculio    schedule 13.08.2017
comment
เพิ่มคำอธิบายที่สมบูรณ์ยิ่งขึ้น..ลองดูสิ!   -  person Govind Rai    schedule 13.08.2017

คำตอบ (1)


arrow_upward
0
arrow_downward

เมื่อใช้ HTML5 History API หน้า index.html จะต้องแสดงแทนการตอบกลับ 404 ใดๆ เปิดใช้งานสิ่งนี้โดยผ่าน:

historyApiFallback: true

จริงๆ แล้วมันเป็นแนวคิดที่ค่อนข้างสำคัญและเป็นแนวคิดที่คุณควรเข้าใจเนื่องจากนี่เป็นองค์ประกอบหลักของแอปพลิเคชันหน้าเดียว (SPA) นอกจากนี้ ฉันรู้สึกว่าคุณควรเจาะลึกลงไปในไฟล์กำหนดค่า webpack ของคุณเมื่อคุณมีโอกาส

นี่เป็นคำอธิบายที่ดีกว่าและสมบูรณ์เกี่ยวกับตัวเลือก historyApiFallback:

โดยทั่วไป Single Page Applications (SPA) จะใช้ไฟล์ดัชนีเพียงไฟล์เดียวเท่านั้นที่เว็บเบราว์เซอร์สามารถเข้าถึงได้: โดยปกติคือ index.html โดยทั่วไปการนำทางในแอปพลิเคชันจะได้รับการจัดการโดยใช้ JavaScript ด้วยความช่วยเหลือของ HTML5 History API ซึ่งส่งผลให้เกิดปัญหาเมื่อผู้ใช้กดปุ่มรีเฟรชหรือเข้าถึงหน้าอื่นที่ไม่ใช่หน้า Landing Page โดยตรง เช่น /help หรือ /help/online เนื่องจากเว็บเซิร์ฟเวอร์ข้ามไฟล์ดัชนีเพื่อค้นหาไฟล์ที่ตำแหน่งนี้ เนื่องจากแอปพลิเคชันของคุณเป็น SPA เว็บเซิร์ฟเวอร์จะไม่สามารถพยายามดึงไฟล์และส่งคืนข้อความ 404 - ไม่พบให้กับผู้ใช้

แหล่งข้อมูลดีๆ สองแห่ง: Webpack Dev Server และ เอกสารประกอบของconnect-history-api-fallback

person Govind Rai    schedule 13.08.2017