웹 팩-dev-server가 리액터로부터 진입점을 허용하는 방법

웹 팩-dev-server가 리액터로부터 진입점을 허용하는 방법

웹팩-dev-server를 리액터러터와 함께 개발 중인 앱을 만들고 있다.

웹팩-dev-server는 당신이 한 장소에 공공 진입점을 갖게 될 것이라는 가정(예: "/")을 기반으로 구축된 것으로 보이는 반면, 리액트라우터는 무제한의 진입점을 허용한다.

웹팩-dev-server의 이점, 특히 생산성에 뛰어난 핫 재로드 기능을 원하지만, 리액터-라우터에 설정된 경로를 로딩할 수 있기를 여전히 원한다.

어떻게 그들이 함께 일하도록 그것을 실행할 수 있었을까?이를 허용하는 방법으로 웹팩-dev-server 앞에서 익스프레스 서버를 운영할 수 있는가?

당신은 설정해야 한다.historyApiFallback의WebpackDevServer이것이 효과가 있는 것처럼여기 작은 예가 있다(자신의 목적에 부합하는 취약점):

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');


var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
}).listen(port, ip, function (err) {
    if(err) {
        return console.log(err);
    }

    console.log('Listening at ' + ip + ':' + port);
});

이를 달성하기 위해 프록시를 설치했다.

자산 경로인 경우를 제외하고 모든 경로에서 인덱스.html을 제공하는 일반 익스프레스 웹 서버가 있을 경우.자산인 경우 요청이 웹-dev-server에 프록시 처리됨

반응 핫 엔트리 포인트는 여전히 웹 팩 개발 서버를 직접 가리키므로 핫 로딩은 여전히 작동한다.

8081년에는 웹 팩-dev-server를 실행하고, 8080년에는 프록시를 실행한다고 가정해 봅시다.server.js 파일은 다음과 같이 표시됨:

"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');

var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');

## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));

app.get('/*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
    contentBase: __dirname,
    hot: true,
    quiet: false,
    noInfo: false,
    publicPath: "/assets/",

    stats: { colors: true }
});

## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);

이제 웹 팩 구성에서 다음과 같이 진입점을 만드십시오.

 entry: [
     './src/main.js',
     'webpack/hot/dev-server',
     'webpack-dev-server/client?http://localhost:8081'
 ]

핫레로드의 경우 8081로 직접 전화를 걸도록 주의하십시오.

또한 에 절대 url을 전달하도록 하십시오.output.publicPath옵션:

 output: {
     publicPath: "http://localhost:8081/assets/",
     // ...
 }

아직 이 답을 찾고 있는 다른 누군가에게.나는 이것을 큰 번거로움 없이 성취할 수 있는 간단한 프록시 바이패스를 조립했고 구성이 webpack.config.js로 들어간다.

나는 regex를 사용하여 로컬 콘텐츠를 테스트할 수 있는 훨씬 더 우아한 방법이 있다고 확신하지만, 이것은 내 필요에 적합하다.

devServer: {
  proxy: { 
    '/**': {  //catch all requests
      target: '/index.html',  //default target
      secure: false,
      bypass: function(req, res, opt){
        //your custom code to check for any exceptions
        //console.log('bypass check', {req: req, res:res, opt: opt});
        if(req.path.indexOf('/img/') !== -1 || req.path.indexOf('/public/') !== -1){
          return '/'
        }

        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index.html';
        }
      }
    }
  }
} 

CLI를 사용하여 webpack-dev-server를 실행하는 경우 webpack.config.js passing devServer 개체를 통해 이를 구성할 수 있다.

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js"
  },
  devServer: {
    historyApiFallback: true
  }
}

이것은 404가 발생할 때마다 index.html로 리디렉션된다.

참고: publicPath를 사용하는 경우 devServer에도 전달하십시오.

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js",
    publicPath: "admin/dashboard"
  },
  devServer: {
    historyApiFallback: {
      index: "admin/dashboard"
    }
  }
}

출력의 처음 몇 줄("404s가 경로로 후퇴할 것" 부분)을 보면 모든 것이 올바르게 설정되었는지 확인할 수 있다.

보다 최근의 답변을 위해 현재 버전의 웹 팩(4.1.1)에서 다음과 같이 webpack.config.js에서 설정하십시오.

const webpack = require('webpack');

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']  
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true,
      historyApiFallback: true
    }
  };

중요한 부분은historyApiFallback: true 지정 만 사용자 지정 서버를 실행할 필요 없이 cli만 사용하십시오.

"scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },

이소모픽 앱을 실행할 때(즉, Resact 구성 요소 서버 측 렌더링) 사례에 대한 답변에 추가하고자 한다.

이 경우 대응 구성 요소 중 하나를 변경할 때 서버를 자동으로 다시 로드하십시오. 어떡해.piping꾸러미설치만 하고 추가만 하면 된다.require("piping")({hook: true})server.js의 시작 부분 어딘가에.바로 그겁니다.서버가 사용하는 구성요소를 변경한 후 서버를 재시작하십시오.

그러나 이것은 또 다른 문제를 야기한다. 만약 당신이 당신의 익스프레스 서버와 같은 프로세스에서 웹팩 서버를 실행한다면, 웹팩 서버 또한 다시 시작할 것이고 매번 당신의 번들을 다시 컴파일할 것이다.이를 방지하려면 배관이 익스프레스 서버만 재시작하고 웹 팩은 건드리지 않도록 주 서버와 웹 팩 서버를 서로 다른 프로세스로 실행해야 한다.넌 이걸로 할 수 있어concurrently꾸러미반응 이형성-스타터키트에서 이것의 예를 찾을 수 있다.소포 안에.그가 가지고 있는 json:

"scripts": {
    ...
    "watch": "node ./node_modules/concurrently/src/main.js --kill-others 'npm run watch-client' 'npm run start'"
  },

두 서버를 동시에 실행하지만 별도의 프로세스로 실행한다.

historyApiFallback또한 경로를 포함하는 부울 대신 객체가 될 수 있다.

historyApiFallback: navData && {
  rewrites: [
      { from: /route-1-regex/, to: 'route-1-example.html' }
  ]
}

모든 경우에 그렇지는 않을지 몰라도publicPath: '/'devServer의 옵션이 심층 경로 문제를 해결할 수 있는 가장 쉬운 솔루션임(https://github.com/ReactTraining/react-router/issues/676 참조)

이것은 나에게 효과가 있었다: 단지 웹팩 미들웨어를 먼저 추가하고, 그리고 웹팩 미들웨어를 추가하기만 하면 된다.app.get('*'...에, index.properties resolut

따라서 익스프레스는 먼저 요청이 웹팩에서 제공하는 경로 중 하나와 일치하는지 확인한다(예:/dist/bundle.js또는/__webpack_hmr_( ) 그리고 만약 그렇지 않다면, 그것은 다음 단계로 이동할 것이다.index.html…과 함께*결의하다

예:

app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
}))
app.use(require('webpack-hot-middleware')(compiler))
app.get('*', function(req, res) {
  sendSomeHtml(res)
})

참조URL: https://stackoverflow.com/questions/26203725/how-to-allow-for-webpack-dev-server-to-allow-entry-points-from-react-router