웹 팩 개발 서버에서 모든 경로에 대해 index.html을 제공하도록 지시하는 방법

웹 팩 개발 서버에서 모든 경로에 대해 index.html을 제공하도록 지시하는 방법

리액션 라우터를 통해 리액션 앱이/arbitrary/route. 이 방법이 작동하려면 서버가 일치하는 경로로 리액션 앱을 전송해야 한다.

그러나 웹팩 개발 서버는 임의의 엔드포인트를 처리하지 않는다.

여기에 추가적인 익스프레스 서버를 사용하는 해결책이 있다.웹 팩-dev-server가 리액터로부터 진입점을 허용하는 방법

하지만 나는 다른 익스프레스 서버를 가동시켜 경로 매칭을 허용하고 싶지 않다.웹팩 개발 서버에게 URL을 일치시키라고 말하고 내 리액션 앱을 보내줘.

다음과 같은 소규모 구성을 포함하는 가장 손쉬운 솔루션을 찾았다.

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

나는 이것을 웹팩이 있는 푸시스테이트-DEV-서버를 방문하여 발견했다.

historyApiFallback 옵션은 웹 팩-dev-server에 대한 공식 설명서에서 다음 중 하나를 사용하여 달성할 수 있는 방법을 명확하게 설명함

historyApiFallback: true

경로를 찾을 수 없을 때 인덱스로 되돌아간다.

또는

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

구성에 공용 경로를 추가하면 웹 팩이 실제 루트를 이해하는 데 도움이 됨(/서브루트에 있을 때에도, 예를 들면. /article/uuid

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

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

없는publicPath리소스가 제대로 로드되지 않을 수 있음(index.properties만).

웹 팩에서 테스트됨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 명령을 실행한 후 웹팩과 'eject' 옵션을 함께 사용해 각도 CLI를 사용하고 있기 때문에 나의 상황은 조금 달랐다.꺼낸 npm 스크립트를 패키지에서 'npm start'로 수정했다.--history-api-fallback 플래그에 json 통과

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

나는 현존하는 대부분의 대답에 동의한다.

내가 언급하고 싶은 한 가지 중요한 것은, 경로의 마지막 부분을 제외한 나머지 부분과 당신의 이름 위의 랙을 모두 유지하는 더 깊은 경로의 페이지를 수동으로 다시 로드할 때 문제가 발생한다면 말이다.js추가 설정이 필요할 수 있는 번들 파일(예:publicPath설정(setting.

예를 들어, 내게 길이 있다면/foo/bar그리고 내 번들러 파일은 불리고bundle.js. 내가 수동으로 페이지를 새로 고치려고 할 때 나는 404라는 말을 듣는다./foo/bundle.js찾을 수 없다흥미롭게도 경로에서 다시 로드하려고 하면/foo문제를 볼 수 없다(이것은 폴백(fallback이 문제를 처리하기 때문이다.

기존 제품과 함께 아래 항목을 사용해 보십시오.webpack문제를 해결하도록 구성하십시오.output.publicPath핵심이야!

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

만약 이 회사 경 로 선택한 webpack-dev-server전체 리액션 앱을 제공하는 데 사용해서는 안 된다.봉사하는 데 써야 한다.bundle.js파일 및 정적 종속성.이 경우, 실제로 경로를 처리하고 HTML을 제공할 Node.js 진입점용 서버와 번들 및 정적 리소스를 위한 서버 2대를 시작해야 한다.

만약 당신이 정말로 단일 서버를 원한다면, 당신은 그 서버의 사용을 중지해야 한다.webpack-dev-server앱 서버 내에서 웹 팩-dev-middleware를 사용하기 시작하십시오."즉시" 번들을 처리하고 (캐슁 및 핫 모듈 교체를 지원하는 것 같음) 다음 연락처로 전화하십시오.bundle.js항상 최신식이다.

나에게 있어서 나는 예를 들어 내 길에 점 "."가 있었다./orgs.csv그래서 이걸 내 웹팩에 넣어야 했어

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

서비스를 활성화할 수 있음index.html이 위치에서 다른 리소스를 찾을 수 없는 경우 404 오류 대신

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

나는 이 질문이 웹팩-dev-server를 위한 질문이라는 것을 알지만 웹팩 4.16.5와 함께 웹팩-serve 2.0을 사용하는 사람은 누구나 추가 기능을 허용한다.생성해야 할 경우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.

참조URL: https://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route