PHP 백엔드에 대한 ReactJS App - 로컬 머신에서 핫 리로드하는 방법?

Question

PHP 백엔드에서 제공하는 ReactJS-App을 개발 중입니다. 내 로컬 컴퓨터에서 MAMP를 내 프로젝트의 루트를 가리키는 가상 호스트로 설정하고 webpack을 사용하여 내 React-App을 번들로 만듭니다.

뜨거운 재로드 작업을 정말 즐긴 이래로 이제는 Webpack dev 서버를 사용하여 MAMP를 프록시 처리하고 핫 로딩 반응 기능을 사용하지 않으려 고합니다.

아직 제대로 작동하지 않아서 구성을 도와 주길 바랍니다. 아니면 내 접근 방식이 기본적으로 작동하지 않습니까? 어쨌든, 내가 도와 주면 기쁠거야. 미리 감사드립니다! 여기에 내 webpack 설정이 있습니다 :

const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const StyleLintPlugin = require('stylelint-webpack-plugin'); 

module.exports = { 
    devtool: 'cheap-module-source-map', 
    devServer: { 
    port: 3000, 
    proxy: { 
     '*': { 
     target: 'http://my-virtual-host.dev:8888/', 
     } 
    } 
    }, 
    entry: [ 
    './src/app.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js', 
    publicPath: 'http://localhost:3000/build/' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     enforce: 'pre', 
     test: /\.jsx?$/, 
     include: [ 
      path.resolve(__dirname, 'src'), 
     ], 
     loader: 'eslint-loader', 
     }, 
     { 
     test: /\.jsx?$/, 
     include: [ 
      path.resolve(__dirname, 'src'), 
     ], 
     loader: 'react-hot-loader' 
     }, 
     { 
     test: /\.jsx?$/, 
     include: [ 
      path.resolve(__dirname, 'src'), 
     ], 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { importLoaders: 1 }, 
      }, 
      'postcss-loader', 
      ], 
     }), 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 

    new ExtractTextPlugin('bundle.css'), 
    new StyleLintPlugin({ 
     configFile: '.stylelintrc', 
     context: 'src', 
     files: '**/*.pcss' 
    }) 
    ] 
}; 

Answer 1

좋아, 해결책을 찾았습니다! 내 잘못 : 내 webpack dev에 서버가 MAMP 모든 요청을 "프록시"하고 응답을 반환해야한다고 생각했다. 다른 방법으로 퍼팅 내 문제 : MAMP 내 PHP 응용 프로그램과 webpack dev에 서버에만 자사의 자산을 제공합니다.

개발 모드에서 내 PHP 응용 프로그램이 자산을 webpack dev 서버에 연결합니다 (github 문제에 대한이 토론은 많은 도움이되었습니다 : https://github.com/webpack/webpack-dev-server/issues/400). 예를 들어 http://localhost:8080/build/app.js에

module.exports = { 
    devServer: { 
    proxy: { 
     '*': { 
     target: 'http://my-virtual-host.dev:8888/', 
     changeOrigin: true, 
     } 
    } 
    }, 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080/', 
    'webpack/hot/only-dev-server', // Enable hot reloading 
    './src/app.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js', 
    publicPath: 'http://localhost:8080/build/' 
    }, 
} 

연결 자산의 proxy 설정 및 output.publicPath는 속임수를 썼는지 :

지금, 내 웹팩 설정 변경의 주요 속성입니다. 뜨거운 다시로드가 정상적으로 작동합니다.

하지만 지금은 나에게 효과가 있지만 나는 여전히 당신의 생각에 열중하고 있습니다!