집 > 기사 > 웹 프론트엔드 > Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼

Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼

小云云원래의: 2018-01-11 09:27:021265검색

이 글은 Webpack+Babel+React 개발 환경을 구축하는 단계를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. Webpack 알아보기

애플리케이션을 구축하기 전에 Webpack은 다양한 파일(예: ReactJS, Babel, Coffeescript, Less/Sass 등)을 다음과 같이 컴파일할 수 있는 모듈 패키징 도구임을 이해해 보겠습니다. 모듈을 선택하고 패키지합니다.

2. Webpack 설치

프로젝트 개발에 Webpack을 사용하려면 먼저 글로벌 환경에 Webpack을 설치해야 합니다.

npm install webpack -g

3. 프로젝트 만들기

설치 후 learn-webpack이라는 프로젝트를 만들고 프로젝트 폴더에 들어가세요. 물론 프로젝트 이름은 무엇이든 지정할 수 있습니다.

mkdir learn-webpack && cd learn-webpack

편집기를 통해 방금 생성한 프로젝트 폴더를 찾으세요

이제 2개의 파일을 만들어 보겠습니다:

app.js

document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

그런 다음 실행 터미널

webpack ./app.js ./dist/bundle.js

마지막으로 실행하여 로컬 http 서비스를 시작합니다

python -m SimpleHTTPServer

이때 브라우저에 입력할 수 있습니다. ://localhost:8000

브라우저에 Hello World가 보이면 Webpack을 사용하여 main.js를 Bundle.js로 패키징하고 컴파일한 것입니다. 매우 간단하지 않나요?

구성 파일 정의

위 내용은 Webpack 사용에 대한 간략한 소개일 뿐입니다. 실제로 모든 프로젝트에는 Webpack에 수행해야 할 작업을 알려주는 webpack.config.js가 포함되어 있어야 합니다.

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

이제 터미널에서 webpack

을 실행하여 패키징 및 컴파일 결과가 이전 입력 webpack ./app.js ./dist/bundle.js와 동일한지 확인하세요.

항목: 패키징을 위한 항목 파일을 지정합니다.

1. 단일 파일을 단일 출력 파일로 압축하고 파일 이름을 직접 작성합니다. 예: 항목: "main.js"

2. 파일을 단일 출력 파일로 묶는 경우 파일 이름을 배열에 입력합니다(예: Entry:['main.js','xx.js']

3). 여러 파일을 여러 출력 파일로 압축하고 파일 이름을 키 쌍, 예: 항목: {a:'main.js',b:'xx.js'}

output: 패키징 결과 구성

path는 정의된 출력 폴더이고 filename은 다음의 이름입니다. 패키징 결과 파일(지정된 경우) 패키징 항목 파일은 위의 1번 또는 2번의 경우이고, 파일명은 출력하려는 파일의 이름이 바로 됩니다. 세 번째 경우라면 파일이름은 [이름].파일이름.js로 작성해야 하며, 파일이름의 [이름]이 항목의 키입니다.

변경 사항 모니터링 및 자동 패키징

코드가 지속적으로 변경될 때 한 번 수정되지 않도록 수동으로 다시 패키징합니다. webpack의 watch 기능을 사용할 수 있습니다.

webpack --watch 또는 webpack -w

또는 구성 코드에서 직접 watch를 true로 설정할 수 있습니다

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

4. Babel 사용

Babel이란 무엇인가요? Babel은 JavaScript 컴파일러입니다. 현재 환경에서 실행될 수 있도록 ES6 구문을 ES5 구문으로 변환하는 데 사용합니다.

터미널에서 실행: npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

설치가 완료된 후 이전 webpack.config.js를 다음으로 수정해야 합니다.

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

이제 ES6 구문을 사용하여 파일에 코드를 작성할 수 있습니다. 다음을 추가하여 테스트해 보겠습니다.

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

ES6에서는 화살표를 사용하여 함수를 정의할 수 있습니다. "I am now"가 콘솔에 표시되면 Babel을 사용하세요. !"가 인쇄되어 Babel 모듈이 성공적으로 설치되었으며 ES6을 사용하여 코드 작성을 시작할 수 있음을 나타냅니다.

로더 항목은 이러한 유형의 리소스를 로드하는 데 사용되는 로더를 나타냅니다.

test는 일치시킬 리소스 유형을 나타내는 정규식입니다.

exclude는 무시해야 하는 파일을 지정합니다. 여기서는 /node_modules/를 지정합니다.

query에는 두 가지 작성 방법이 있습니다. 하나는 문자열 형식으로 로더 이름 바로 뒤에 오는 것입니다.

loader: &#39;babel-loader?presets[]=es2015

다른 하나는 이 문서에 표시된 것과 같습니다.

query: {
 presets: [&#39;es2015&#39;]
}

resolve.extensions는 이를 지정하는 데 사용됩니다. 프로그램 완성은 어떤 접미사를 자동으로 식별합니다.

접미사가 필요하지 않은 상황에 해당하는 확장명 중 첫 번째는 빈 문자열입니다.

5.Webpack을 이미 구성했습니다. and Babel and done 몇 가지 소개를 마치고 기본 환경이 설정되었으며 이제 React를 사용하기 시작합니다.

React 및 React-dom을 설치하려면 터미널에 다음 코드를 입력하세요

npm install react react-dom --save

Babel针对React的所有的预设插件

npm install babel-preset-react --save-dev

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

现在创建一个名为hello.js的文件

import React from "react";

class Hello extends React.Component{
 render() {
  return (
   <p>
     Hello, World!
   </p>
  )
 }
}

export default Hello;

然后将app.js里面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

Webpack, Babel 및 React 개발 환경 설정에 대한 튜토리얼

관련 기사