Cách báo cho máy chủ phát triển webpack để phục vụ index.html cho bất kỳ tuyến đường nào

React router cho phép các ứng dụng phản ứng xử lý /arbitrary/route. Để làm việc này, tôi cần máy chủ của mình gửi ứng dụng React trên bất kỳ tuyến đường phù hợp nào.

Nhưng máy chủ webpack dev không xử lý các điểm cuối tùy ý.

Có một giải pháp ở đây bằng cách sử dụng máy chủ tốc hành bổ sung. Cách cho phép webpack-dev-server cho phép các điểm vào từ bộ định tuyến phản ứng

Nhưng tôi không muốn kích hoạt một máy chủ tốc hành khác để cho phép khớp tuyến. Tôi chỉ muốn nói với máy chủ phát triển webpack phù hợp với bất kỳ url nào và gửi cho tôi ứng dụng phản ứng của tôi. xin vui lòng.

Tôi tìm thấy giải pháp dễ nhất để bao gồm một cấu hình nhỏ:

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  }

Tôi đã tìm thấy điều này bằng cách truy cập: PUSHSTATE VỚI WEBPACK-DEV-SERVER .

Tùy chọn historyApiFallback trên tài liệu chính thức cho webpack-dev-server giải thích rõ ràng cách bạn có thể đạt được bằng cách sử dụng

historyApiFallback: true

mà chỉ đơn giản là quay trở lại index.html khi không tìm thấy tuyến đường

hoặc là

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}

Thêm đường dẫn công khai vào cấu hình giúp webpack hiểu được root thực sự ( /) ngay cả khi bạn đang ở trong chương trình con, vd./article/uuid

Vì vậy, sửa đổi cấu hình webpack của bạn và thêm sau đây:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Không có publicPathtài nguyên có thể không được tải đúng cách, chỉ index.html.

Đã thử nghiệm trên Webpack 4.6

Phần lớn hơn của cấu hình (chỉ để có hình ảnh tốt hơn):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}

Làm việc cho tôi như thế này

devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true

},

Làm việc trên ứng dụng bạo loạn

Tình huống của tôi hơi khác một chút, vì tôi đang sử dụng CLI góc với webpack và tùy chọn 'eject' sau khi chạy lệnh ng eject . Tôi đã sửa đổi tập lệnh npm bị đẩy ra cho 'npm start' trong gói.json để chuyển qua cờ --history-api-fallback

"bắt đầu": "webpack-dev-server --port = 4200 --history-api-fallback "

"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200 --history-api-fallback",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"startold": "webpack-dev-server --inline --progress --port 8080",
"testold": "karma start",
"buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"},

Nếu bạn chọn sử dụng webpack-dev-server, bạn không nên sử dụng nó để phục vụ toàn bộ ứng dụng React của mình. Bạn nên sử dụng nó để phục vụ bundle.jstập tin của bạn cũng như các phụ thuộc tĩnh. Trong trường hợp này, bạn sẽ phải khởi động 2 máy chủ, một cho các điểm nhập Node.js, thực sự sẽ xử lý các tuyến và phục vụ HTML và một máy chủ khác cho gói và tài nguyên tĩnh.

Nếu bạn thực sự muốn một máy chủ, bạn phải ngừng sử dụng webpack-dev-servervà bắt đầu sử dụng webpack-dev-middleware trong máy chủ ứng dụng của bạn. Nó sẽ xử lý các gói "nhanh chóng" (tôi nghĩ rằng nó hỗ trợ bộ nhớ đệm và thay thế mô-đun nóng) và đảm bảo các cuộc gọi của bạn bundle.jsluôn được cập nhật.

Bạn có thể kích hoạt historyApiFallbackđể phục vụ index.htmlthay vì lỗi 404 khi không tìm thấy tài nguyên nào khác tại vị trí này.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: true,
});

Nếu bạn muốn phân phát các tệp khác nhau cho các URI khác nhau, bạn có thể thêm các quy tắc viết lại cơ bản vào tùy chọn này. Các index.htmlvẫn sẽ được phục vụ cho các đường khác.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: {
        rewrites: [
            { from: /^\/page1/, to: '/page1.html' },
            { from: /^\/page2/, to: '/page2.html' },
            { from: /^\/page3/, to: '/page3.html' },
        ]
    },
});

Tôi biết câu hỏi này dành cho webpack-dev-server, nhưng dành cho bất kỳ ai sử dụng webpack-phục vụ 2.0. với gói web 4.16.5 ; webpack-phục vụ cho phép các tiện ích bổ sung. Bạn sẽ cần tạo serve.config.js:

const serve = require('webpack-serve');
const argv = {};
const config = require('./webpack.config.js');

const history = require('connect-history-api-fallback');
const convert = require('koa-connect');

serve(argv, { config }).then((result) => {
  server.on('listening', ({ server, options }) => {
      options.add: (app, middleware, options) => {

          // HistoryApiFallback
          const historyOptions = {
              // ... configure options
          };

          app.use(convert(history(historyOptions)));
      }
  });
});

Tài liệu tham khảo

Bạn sẽ cần phải thay đổi tập lệnh dev từ webpack-servesang node serve.config.js.

Đối với tôi, tôi đã có dấu chấm "." trong đường dẫn của tôi, ví dụ như /orgs.csvvậy, tôi phải đặt cái này vào confg webpack của mình.

devServer: {
  historyApiFallback: {
    disableDotRule: true,
  },
},

Tôi đồng ý với phần lớn các câu trả lời hiện có.

Một điều quan trọng tôi muốn đề cập là nếu bạn gặp sự cố khi tải lại các trang theo cách thủ công trên các đường dẫn sâu hơn , nơi nó giữ tất cả trừ phần cuối cùng của đường dẫn và xử lý tên jstệp bó của bạn, bạn có thể cần một cài đặt bổ sung (cụ thể là publicPathcài đặt ).

Ví dụ: nếu tôi có một đường dẫn /foo/barvà tập tin gói của tôi được gọi bundle.js. Khi tôi cố gắng làm mới trang theo cách thủ công, tôi nhận được thông báo 404 /foo/bundle.jskhông thể tìm thấy. Thật thú vị nếu bạn thử tải lại từ đường dẫn /foomà bạn thấy không có vấn đề gì (điều này là do dự phòng xử lý nó).

Hãy thử sử dụng kết hợp bên dưới với webpackcấu hình hiện tại của bạn để khắc phục sự cố. output.publicPathlà mảnh ghép quan trọng!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}