React와 Babel로 처음부터 웹 페이지 만들기 5 [2021]

18948 단어 webdevbabelreactwebpack
자신의 웹 패키지 설정을 만드는 것은 개발자들에게 매우 무섭다.하지만 문제를 해결하는 가장 좋은 방법은 그것을 직면하는 것이다!이 블로그는 당신의 다음 React 프로젝트에 React와 Babel이 있는 기본 패키지 귀속기를 설정하는 데 도움을 줄 것입니다.Webpack의 기본 지식, Webpack이 어떻게 설치되었는지, 엔진 뚜껑 아래에서 도대체 무슨 일이 일어났는지 이해하려는 사람들에게도 적용된다.그러니 우리 그 속에 몰입합시다!

TLDR


코드를 직접 보고 싶은 프로그래머들에게는
Github repo

1단계(폴더 설정 및 다운로드 종속성 지정)

  • 은 폴더를 만드는 것부터 시작해서 마음에 드는 이름을 지어줍니다.나는 나의 이름을 react-webpack이라고 명명했다.
  • 파일을 시작하고 패키지 관리자를 초기화합니다.-y은 명령행의 모든 일반 개발 문제의'예'를 대표한다.
    • npm init -y
    이것이 바로 그것의 모습이다.
  • 다음에react 의존항을 설치할 것입니다.
    • npm i react react-dom
  • 패키지의 의존항.json 파일에는 다음 내용이 포함됩니다.
    • "dependencies": {
   "react": "^17.0.1",
   "react-dom": "^17.0.1"
 }
  • 다음에 개발 의존 항목과 로더를 설치할 것입니다
    • npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader css-loader style-loader webpack webpack-cli html-webpack-plugin
  • package.json의 devDependencies 모습입니다.
    • "devDependencies": {
   "@babel/core": "^7.13.10",
   "@babel/preset-env": "^7.13.10",
   "@babel/preset-react": "^7.12.13",
   "babel-loader": "^8.2.2",
   "css-loader": "^5.1.3",
   "file-loader": "^6.2.0",
   "html-webpack-plugin": "^5.3.1",
   "style-loader": "^2.0.0",
   "webpack": "^5.27.0",
   "webpack-cli": "^4.5.0",
   "webpack-dev-server": "^3.11.2"
 }

    2단계(Babel을 사용하여 웹 패키지 설정)

  • 다음에 우리는 .babelrc이라는 파일을 만들 것입니다. 이 파일은 우리의react 코드를 jsx에서 일반 js로 전송합니다.다음과 같은 사전 설정이 필요합니다.
    • {
   "presets": [
       "@babel/preset-env",
       "@babel/preset-react"
   ]
}
    지금까지 우리의 코드와 파일 구조는 이렇다.
  • 다음에 웹 패키지 파일을 만듭니다.우리는 그것을 webpack.config.js이라고 명명할 것이다.이 웹 패키지 폴더는 기본적으로 브라우저가 아닌 노드 환경에서 실행됩니다.따라서 우리는 이곳에서 일반적인 js 코드를 작성할 수 있다.
    • 파일의 모양은 다음과 같습니다.
    const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // Where files should be sent once they are bundled
 output: {
   path: path.join(__dirname, '/dist'),
   filename: 'index.bundle.js'
 },
  // webpack 5 comes with devServer which loads in development mode
 devServer: {
   port: 3000,
   watchContentBase: true
 },
  // Rules of how webpack will take our files, complie & bundle them for the browser 
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /nodeModules/,
       use: {
         loader: 'babel-loader'
       }
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     }
   ]
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
}

    웹 패키지 이해하기.배치하다.js

  • output에서 우리는 파일을 묶어서 어디로 보내야 하는지를 언급했다.
  • path은 모든 번들 파일을 저장하는 디렉토리의 이름을 설명합니다.우리는 폴더를 dist으로 명명했는데, 이것은 흔히 볼 수 있는 방법이다.
  • 과 filename은 새 귀속 파일을 위한 이름입니다. 이 파일은 웹 패키지에서 마력을 실행한 후에 생성됩니다. (기본적으로 모든 js 코드를 한 파일에 귀속시킵니다.)
  • devServer은 응용 프로그램을 신속하게 개발하는 데 사용되는데 이것은 생산 모델과 반대로 생산 모델은 응용 프로그램을 구축하는 데 더 많은 시간을 필요로 한다. 왜냐하면 파일을 축소하고 개발 모델에서 이런 상황이 발생하지 않기 때문이다.
  • 과 port은 우리가 선택한 포트 번호를 설정할 수 있습니다.나는 이미 3000까지 정했다.

  • 모든 파일에 변경 사항이 있을 때 watchContentBase은 전체 페이지를 다시 불러옵니다.기본적으로 비활성화되어 있습니다.
  • module은 파일 귀속 규칙을 전달하는 곳이다.
  • test은 우리가 언급한 파일 확장명으로 특정한 마운트 프로그램에 의해 지정되어야 한다.
    모든 .js 또는 .jsx 파일은 babel loader에 의해 귀속되어야 합니다.
  • exclude은 번들 프로그램에서 무시해야 할 파일을 언급한 부분입니다.
  • 역시 css 파일에 적용됩니다.주의해야 할 것은 use :['style-loader', 'css-loader']의 수조는 이 정확한 순서에 따라 써야 한다는 것이다.
  • 웹팩이 css 파일을 번들일 때 다음 순서가 적용됩니다.
  • 은 먼저 css-loader을 실행하고 css 파일을 공공 js로 변환합니다.
  • 다음에 style-loader을 실행하여 css를 문자열로 파일에서 추출합니다.
  • 마지막으로 HtmlWebpackPlugin이라는 plugin을 추가하여 웹 패키지가 프로그램을 실행할 때 어떤 html 파일 템플릿을 따라야 하는지 알 수 있도록 했습니다.

    • 3단계(react 폴더 설정)


    자, 복잡한 부분 완성!이제, 우리의react 응용 프로그램 파일을 구축합시다!😄src 폴더를 만들고 4개의 파일을 만듭니다.

    src

    index.html
    index.js
    App.js
    App.css


    색인html


    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack App</title>
</head>

<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>

</html>

    색인js


    import React from "react"
import ReactDom from "react-dom"
import App from "./App"
import "./App.css"

ReactDom.render(<App />, document.getElementById('app'))

    응용 프로그램.js


    예를 들어, 나는 매우 기본적인 프로그램을 만들고 있지만, 너는 네가 좋아하는 것을 더 많이 추가할 수 있다.
    import React from "react"

function App() {
    return (<div>
        <h2>Welcome to React App</h2>
        <h3>Date : {new Date().toDateString()}</h3>
    </div>)
}

export default App

    응용 프로그램.css


    h1{
    color: teal
}

    소포.json


    알겠습니다. package.json 파일에서 프로그램을 실행하는 데 사용할 스크립트를 만들어야 합니다.다음 스크립트를 추가합니다.
    "scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  }

    4단계(어플리케이션 실행)

  • 은 이제 run 명령을 사용하여 CLI에서 실행하기만 하면 코드가 상기 포트에서 실행되는 것을 볼 수 있다.내 입장에서 말하자면, 그것은 3000 포트에서 운행한다.이것이 바로 패키지 개발 모델에서의 외관이다.
    • npm run serve
  • 다음에dist 폴더가 생산 모드에서 어떻게 생성되었는지 볼 수 있는build을 진행할 수 있습니다.
    • npm run build
    - dist 폴더를 구축한 후 dist 폴더에 있는 index.html 파일을 오른쪽 단추로 클릭하고'live 서버에서 열기'를 누르면 생산 모드에서의 외관을 볼 수 있습니다.이것이 바로 생산 모델에 묶인 외관이다.그것은 잘렸다.

    보상:최적화!


    react 웹 응용 프로그램을 최적화하기 위해 JS/JSX 파일과 CSS/SASS 파일을 분리합니다.
    이것은 좋은 방법이다. Webpack에서 style-loader과 css-loader 같은 마운트 프로그램은 스타일시트를 미리 처리하고 HTML 파일이 아닌 출력 자바스크립트 패키지에 삽입하기 때문이다.
    때로는 그렇기 때문에 스타일이 없는 내용 (FOUC) 이 반짝일 수도 있다. 그곳에서 1초 동안 아무런 스타일도 없는 추악한 일반 HTML을 볼 수 있다.이런 엉망진창인 시각적 체험을 피하기 위해서, 우리는 HTML 파일에서 파일을 분리하고 CSS를 연결해서 FOUC가 존재하지 않도록 해야 한다.
  • 플러그인(예: MiniCssExtractPlugin)은 CSS 파일을 분리하고 축소하며 HTML 파일에 링크로 삽입하여 FOUC를 피하도록 도와줍니다.다음 명령을 사용하여 설치합니다.
    • npm install --save-dev mini-css-extract-plugin
  • 다음은 저희가 추가할 수 있는 방법입니다.우선 require에 그것을 웹 페이지에 놓으세요.배치하다.MinicsExtractPlugin 로더를 style-loader으로 교체하고 플러그인에 추가합니다.
  • 은 이렇습니다. (변경해야 할 세 가지를 강조했습니다):
  • 마지막으로build 명령을 다시 실행합니다. dist 폴더에서 새로운 main.css 파일을 볼 수 있습니다.
    • npm run build
  • 최종 모양새입니다.CSS 파일로 다양한 구성 요소를 구축하고 CRA와 유사한 React 웹 프로그램을 구축하는 방법을 보여 주는 일반적인 폼 요소를 추가했습니다.

    • 크레디트


    만약 당신이 시각 학습자라면 영상 설명을 원한다면 아래의 멋진 영상을 보십시오.나는 그를 따라 이 틀을 배우고 세웠다.
    【LA4015】Caves【Tree DP】
    실행 컨텍스트란?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage