React가 webpack-dev-server를 실행해야하는 이유는 무엇입니까?

Question

저는 React를 처음 접했습니다. Facebook's Installation (Create a New App)을 따랐습니다.

그래서 내가 응용 프로그램을 실행해야 할 때마다, 그것은 서버를 시작해야합니다. Chrome에서 빌드 버전을 열려고하면 (HTML을 직접 여는 경우) 아무 것도 표시되지 않습니다.

은 그 때 나는 codecademy 자습서를 사용하여 처음부터 환경을 자신 반응 설정에 노력했다. 여기에서 프로젝트를 빌드 한 후 크롬에서 HTML을 직접 열 수 있으며 내용이 표시됩니다.

내 질문은 :

왜 웹 페이지는 첫번째 방법에 표시되지 않지만 둘째 방법은 서버를 시작하지 않고 실행?

---

편집 : 두번째 방법

package.json :

{ 
    "name": "practice", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-react": "^6.24.1", 
    "html-webpack-plugin": "^2.30.1", 
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.8.2" 
    } 
} 

webpack.config.js :

var HTMLWebpackPlugin = require('html-webpack-plugin'); 
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: __dirname + '/app/index.js', 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     } 
    ] 
    }, 
    output: { 
    filename: 'transformed.js', 
    path: __dirname + '/build' 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
}; 

Answer 1

문제 : 의 다른 파일에 대한 경로입니다. webpack-dev-server 디렉토리에서 실행

는

, 그것은 서버의 루트입니다 가정합니다.

Facebook 자습서로 만든 앱의 HTML (build/index.html)을 열면 다른 파일의 경로는 절대 경로로 표시되지만 상대 경로는 아닌 것을 볼 수 있습니다.

처럼 HTML에 당신은 /static/pathToFile하지만 ./static/pathToFile을 볼 수 있습니다.

그래서, 당신의 2 방법에 따라, 귀하의 HTML에 /transformed.js로 transformed.js에 대한 경로를 제공하려고합니다. 아무것도 표시하지 않습니다. 그러나 npm run start을 실행 한 다음 주어진 포트 번호로 로컬 호스트를 여는 경우 (첫 번째 방법과 동일). 이제 React 앱을 볼 수 있습니다.

의견 : 항상 처음부터 환경을 설정해보십시오. Facebook의 "새 앱 만들기"와 같은 설정 방법을 쉽게 시도하지 마십시오. 대신 Facebook의 "기존 애플리케이션에 반응 추가"를 시도하십시오. 오늘처럼 일이 실제로 어떻게 작동 하는지를 배울 수 있습니다.

팁 :

시도는 웹 브라우저에서 항상 응용 프로그램을 디버깅하는 방법!

예를 들어, 크롬 오픈 개발자 도구에서 첫번째 방법 HTML을 엽니 다.

네트워크 탭으로 가서 다시로드하십시오.

오류가 무엇인지 확인하려면 실패한 파일을 가리 키십시오. ERR_FILE_NOT_FOUND을 볼 수 있습니다. 이 반환 상태를 볼 수에

클릭 url은

는 희망이 도움 등

을 요청!