Webpack으로 React 애플리케이션 만들기.

11483 단어 babelreactjavascriptwebpack

Webpack으로 React 애플리케이션 만들기.



이 기사에서는 Webpack 5로 React App을 만드는 방법을 배웁니다.

1. 폴더 생성 및 NPM 초기화




npm init -y


2. 다음 패키지를 설치합니다.




npm i react react-dom




npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server


3. .babelrc 파일 생성



.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}


4. webpack.config.js 파일 생성



webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"), // the bundle output path
    filename: "bundle.js", // the name of the bundle
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // to import index.html file inside index.js
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js and .jsx files
        exclude: /node_modules/, // excluding the node_modules folder
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, // styles files
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
        loader: "url-loader",
        options: { limit: false },
      },
    ],
  },
};


5. /src 폴더를 만들고 그 안에 다음 파일을 만듭니다.




|-- src
  |-- App.js
  |-- App.scss
  |-- index.html
  |-- index.js


App.js

import React from "react";
const App = () => {
  return <h1>Hello React</h1>;
};

export default App;


App.scss

h1 {
  color: red;
}


index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React with Webpack</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- Notice we are pointing to `bundle.js` file -->
    <script src="bundle.js"></script>
  </body>
</html>


index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./App.scss";

const el = document.getElementById("app");

ReactDOM.render(<App />, el);


6. 서브 및 빌드 스크립트 생성


package.json 파일에 다음을 추가합니다.

  //....
  "scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  //....


7. 앱 실행 및 수정


npm run serve로 앱을 실행합니다.http://localhost:3030/에서 브라우저를 엽니다.
즉시 수정하고 변경 사항을 확인하십시오.

8. 앱 구축



터미널에서 npm run build를 실행합니다.
다음 출력이 표시됩니다.

|-- dist
  |-- bundle.js
  |-- bundle.js.LICENSE.txt
  |-- index.html


이제 index.html 파일을 열면 앱이 표시됩니다.
Cloud Composter에서 MySQL을 관리하는 프로세스에 연결할 수 없습니다.
Lv2-괄호 변환

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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