모든 경로에 대해 index.html을 제공하도록 webpack dev 서버에 지시하는 방법

반응 라우터는 반응 앱이 처리 할 수 ​​있도록 /arbitrary/route합니다. 이것이 작동하려면 일치하는 경로에서 React 앱을 보내려면 서버가 필요합니다.

그러나 webpack dev 서버 는 임의의 엔드 포인트를 처리하지 않습니다.

추가 Express 서버를 사용하는 솔루션이 있습니다. webpack-dev-server가 반응 라우터의 진입 점을 허용하도록 허용하는 방법

그러나 경로 일치를 허용하기 위해 다른 급행 서버를 시작하고 싶지 않습니다. 나는 단지 어떤 URL과 일치하도록 webpack dev 서버에 알리고 내 반응 앱을 보내려고합니다. 부디.

작은 구성을 포함하는 가장 쉬운 솔루션을 찾았습니다.

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

PUSHSTATE WITH WEBPACK-DEV-SERVER 방문하여 이것을 발견했습니다 .

webpack -dev-server 공식 문서의 historyApiFallback 옵션은다음 중 하나를 사용하여 달성 할 수있는 방법을 명확하게 설명합니다.

historyApiFallback: true

경로를 찾지 못하면 index.html로 돌아갑니다.

또는

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

설정에 공개 경로를 추가하면 서브 루트를 사용하는 /경우에도 웹팩이 실제 루트 ( ) 를 이해하는 데 도움 이됩니다./article/uuid

따라서 웹팩 구성을 수정하고 다음을 추가하십시오.

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

publicPath리소스가 없으면 제대로로드되지 않을 수 있으며 index.html 만 있습니다.

Webpack에서 테스트 4.6

구성의 더 큰 부분 (더 나은 그림을 얻기 위해) :

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
}

이렇게 나를 위해 작동

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

},

폭동 앱 작업

ng eject 명령을 실행 한 후 webpack 및 'eject'옵션과 함께 각도 CLI를 사용하고 있기 때문에 상황이 조금 다릅니다 . package.json에서 'npm start'에 대해 추출 된 npm 스크립트를 수정하여 --history-api-fallback 플래그를 전달했습니다.

"start": "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"},

를 사용하기로 선택한 경우 webpack-dev-server전체 React 앱을 제공하는 데 사용해서는 안됩니다. 당신은 그것을 제공하기 위해 그것을 사용해야합니다bundle.js정적 종속성뿐만 아니라 파일 . 이 경우 실제로 경로를 처리하고 HTML을 제공하는 Node.js 진입 점용 서버와 번들 및 정적 리소스 용 서버를 각각 2 대씩 시작해야합니다.

실제로 단일 서버를 원한다면 응용 프로그램 서버에서 webpack-dev-middlewarewebpack-dev-server 사용 을 중지 하고 시작 해야합니다. 번들을 "즉석으로"처리하고 (캐싱 및 핫 모듈 교체를 지원한다고 생각합니다) 항상 최신 상태 인지 확인하십시오 .bundle.js

이 위치에 다른 리소스가 없으면 404 오류 대신 historyApiFallback서비스를 제공 할 수 있습니다 index.html.

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

다른 URI에 대해 다른 파일을 제공하려는 경우이 옵션에 기본 재 작성 규칙을 추가 할 수 있습니다. 는 index.html여전히 다른 경로에 대한 제공됩니다.

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

이 질문은 webpack-dev-server에 대한 것이지만 webpack-serve 2.0 을 사용하는 모든 사람에게 해당 됩니다. 와 웹팩 4.16.5 ; webpack-serve는 부가 기능을 허용합니다 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)));
      }
  });
});

참고

dev 스크립트를에서 webpack-serve로 변경해야 합니다 node serve.config.js.

나를 위해 점 "."이 있었다 내 경로에 예를 들어 /orgs.csv웹팩 구성에 넣어야했습니다.

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

기존 답변의 대부분에 동의합니다.

내가 언급하고 싶었던 한 가지 중요한 점은 경로 의 마지막 섹션을 제외한 모든 부분을 수동으로 다시로드 할 때 문제를 겪고 번들 파일 의 이름을 고정 하는 경우 추가 설정 (특히jspublicPath 설정을 ).

예를 들어 경로가 /foo/bar있고 번 들러 파일이 호출되는 경우 bundle.js. 페이지를 수동으로 새로 고치려고하면 404를 /foo/bundle.js찾을 수 없다는 메시지가 나타납니다. 흥미롭게도 경로에서 다시로드하려고 /foo하면 아무런 문제가 없습니다 (폴 백이 처리하기 때문입니다).

아래를 기존 webpack구성 과 함께 사용하여 문제를 해결하십시오. output.publicPath핵심 작품입니다!

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