webpack React構築項目

12779 ワード

1.Nodejsをインストールして、nodejsをシステム環境にインストールする.
nodejsは現在のページのバージョンを直接ダウンロードすればいいです.
2.ディレクトリの作成とプロジェクトの初期化ここでは、macの例を示したコマンドラインで下記のコマンドを入力します.

 mkdir my-react-app
 cd my-react-app
 mkdir src
 npm init -y

3.webpack依存をインストールし、便利になったらwebpackで梱包してプロジェクトを生成する.

npm i webpack webpack-cli --save-dev

–save-devと--saveの違いは、一般的にsave-devパラメータを使用して実装されたnpmパッケージは最終パッケージ化時にソースコードに含まれないので、bebelとwebpackのようなプロジェクト構築やコードコンパイルを行うライブラリはsave-devでインストールされます.saveはインストールコードの実行に必要なライブラリです.例えば、reactなどです.
4.バベルの設置
babelは主にESの互換性があります.

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

@babel/coreはbabelのコアライブラリであり、@babel/prest-env高バージョンESは低バージョンESに対応しています.@babel/preset-reactはJSX文法を識別しています.babel-loaderは多くのフォーマット変換機能を持っています.
5.バベルの配置
ルートディレクトリmy-react-ap下に新規作成.babelrcファイル追加配置

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

6.新規ホームページ関連ファイルを作成する
my-react-apルートディレクトリのsrcディレクトリの下で新規作成:index.html、App.js、main.jsの3つのファイルindex.は、ホームスタイルApp.jsです.コンポーネントmain.jsの入り口ファイルです.
7.html-webpack-plugin、html-loaderを取り付ける
ルートディレクトリコマンド

npm i html-webpack-plugin html-loader --save-dev

httml-webpack-pluginは、主に、ファイルに導入された外部リソース例えば、script、linkのように、comple後のhashをダイナミックに添加して、キャッシュされた外部ファイルの問題を防止するために使用されます.2.単ページで一つのhtmlファイルの入り口を生成し、N個のhttml-webpack-pluginを配置してN個のページの入り口を生成することができます.
8.webpack.co.nfig.jsを配置する.
ルートディレクトリmy-react-apでwebpack.co.nfig.jsファイルの追加構成を作成します.

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output:{
   filename: 'bundle.js',
   path: path.resovle(__dirname,'disk')
  },
  module:{
    rules:[
      {
        test: \/.js$\,
        exclude: "/node_module/",
        use:{
           loader: "babel-loader"
        }
      },
      {
        test: \/.html$\,
        exclude: "/node_module/",
        use:{
           loader: "html-loader"
        }
      }
    ]
  },
  plugins:[
   new HtmlWebPackPlugin({
     title:'The World of React-App',
     filename:'index.html',
     template:'./src/index.html'
   })
  ]
}

9.React、React Domの取り付け

npm i react react-dom --save

10.index.html、main.js、App.jsファイルを作成する
index.

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

mail.js

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

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

アプリ.js

//    16.8    React   Hook   
import React,{useState,useEffect} from "react"

export default function mainApp(){
    const [title,setTitleName] = useState('React     ')

    return (
      <div>
        <h2>{title}</h2>
      </div>
    )
}

11.webpack-dev-serverをインストールする

npm i webpack-dev-server --save-dev

webpack-dev-serverは、ローカルサービスを起動して、ページ効果をプレビューします.
12.package.jsonを配置する
ルートディレクトリpackage.jsonに配置を追加します.

"scripts":{
 "start":"webpack-dev-server --open --mode --development"
}

13.運転項目

npm run start

HDOJ 2027統計母音