반응 웹팩이란 무엇입니까?

react는 사용자 인터페이스를 구축하는 데 사용되는 JAVASCRIPT 라이브러리입니다. webpack은 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 해당 모듈에서 해당 정적 리소스를 생성합니다.

이 튜토리얼의 운영 환경: windows7 시스템, webpack3.0&&react16.4.0 버전, Dell G3 컴퓨터.

추천: react 비디오 튜토리얼

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.

React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React가 MVC의 V(뷰)라고 생각합니다.

React는 Facebook의 내부 프로젝트에서 시작되었으며 Instagram의 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.

React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 주목하고 사용하기 시작했습니다.

Webpack은 프런트엔드 리소스 로딩/패키징 도구입니다. 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 이러한 모듈에 해당하는 정적 리소스를 생성합니다.

Webpack은 오픈 소스 프런트엔드 패키징 도구입니다. Webpack은 프런트 엔드 개발에서 부족한 모듈식 개발 접근 방식을 제공하여 다양한 정적 리소스를 모듈로 처리하고 여기에서 최적화된 코드를 생성합니다. Webpack은 터미널에서 또는 webpack.config.js를 변경하여 다양한 기능을 설정할 수 있습니다. Webpack을 사용하기 전에 Node.js를 설치해야 합니다.

webpack의 주요 목표는 브라우저에서 사용할 수 있도록 JavaScript 파일을 함께 패키지하는 것이지만 리소스나 자산을 변환, 번들 또는 패키징할 수도 있습니다.

Webpack React 개발 환경 구성

Webpack 설치: npm install -g webpack

Webpack은 webpack.config.js라는 구성 파일을 사용합니다. 먼저 해당 로더를 설치합니다: npm install babel -loader. --save-dev

현재 프로젝트 디렉터리에 항목 파일인 Entry.js가 있다고 가정합니다. React 구성 요소는 구성 요소/디렉토리에 있으며, Entry.js를 사용하려면 다음을 입력합니다. 이 파일은 dist/bundle.js에 대한 출력을 지정합니다. Webpack 구성은 다음과 같습니다.

var path = require('path');module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve는 가져올 수 있는 파일 접미사를 지정합니다. 예를 들어 Hello.jsx와 같은 파일은 'Hello'에서 Hello 가져오기를 사용하여 직접 참조할 수 있습니다.

loaders는 .js 또는 .jsx 확장자를 가진 파일을 컴파일하기 위해 babel-loader를 지정하므로 이 두 가지 유형의 파일에서 JSX 및 ES6를 자유롭게 사용할 수 있습니다.

모니터링 컴파일: webpack -d --watch

위 내용은 반응 웹팩이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!