Webpackを使用してReact開発環境を構成する

8853 ワード
webpack React babel テキストリンク
CRAではなくWebpackを使用してReactプロジェクトを作成
なぜWebpackを使うのですか?
  • フリーカスタマイズ
  • の比較的重いCRAは
    • に分けることができる.
    Webpackを設定する方法は次のとおりです.
  • プロジェクトフォルダを作成し、依存
    • を初期化します.
    mkdir webpack_react
cd webpack_react
npm init -y
  • バーベル設定
    バーベルのパッケージをインストールします.
    • npm i -D @babel/core @bable/preset-env @bable/preset-react
    .babelrcファイルを作成し、次のコードを追加します.
    // .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
  • Webパッケージの設定
    3-1. Webパッケージを使用するために必要なパッケージをインストールします.
    • npm i -D webpack webpack-cli webpack-dev-server
    3-2. プロファイルwebpack.config.jsを作成し、次のコードを追加します.
    // webpack.config.js

module.exports = {
	mode: 'development',
    entry: './src/index.js',
    output: {
    	filename: 'bundle.[hash].js'
    }
}
    module.exports={}部分でWebパッケージを設定します.
    modeには大きく3種類あります.
    1.生産:構築の最適化
    2.開発:迅速な構築
    3.none:機能構築なし
    entryはアプリケーションのエントリであり、JavaScriptファイルのパスでもあります.
    outputプロパティは、Webパッケージを迂回して生成された結果のファイルパスです.
  • loader
    loaderは、Webパッケージがアプリケーションを解釈するときにJSファイルではなくHTML、CSS、IMGを変換するのに役立つ属性です.
    • npm i -D babel-loader
    loderはmoduleとrulesというキーワードを使用し、ルールを定義するときに次のフォームを使用します.
    module: {
	rules: [
    	{
        	test: /\.(js|jsx)$/, // 빌드할 파일 확장자 정규식
        	exclude: /node_moduels/, // 제외할 파일 정규식
        	use:{
        	loader: 'babel-loader', // 사용할 로더 이름
        	option: // 로더 옵션
        }
    ]
}
  • plugin 
    • npm i -D html-webpack-plugin
    テンプレートを指定するか、お気に入りアイコンを設定できます.
    // webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
// ...

	plugins: [
    	new HtmlWebpackPlugin({
        	template: 'public/index.html',
        })
    ],

// ...
}
    template: 'public/index.htmlを使用してテンプレートを指定します.
    接続
  • Webパッケージで提供する開発サーバ
    • npm i -D webpack-dev-server
    package.jsonのスクリプトの変更
    // package.json

"scripts": {
	"test": "echo \"Error: no test specitied\" && exit 1",
    "start": "webpack-dev-server"
}
    webpack.config.jsで開発サーバを設定する
    // webpack.config.js

const port = process.env.PORT || 3000;

module.exports = {
// ...

devServer: {
	host: 'localhost',
    port: port,
    open: true,
},
},
    hostはサーバを開発するurlです.
    portはデフォルト3000を使用します.
    Openは、サーバの実行時にブラウザを自動的に開くかどうかを決定します.
    次はwebpackconfig.jsすべてのコード.
    const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;

module.exports = {
    mode: 'development', 
    entry: './src/index.js',
    output: {
        filename:'bundle.[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, // 가지고 올 파일 정규식
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader', // 사용할 로더 이름
                },
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html', // public/index.html 파일을 읽는다.
            filename: 'index.html' // output으로 출력할 파일은 index.html이다.
        }),
    ],
    devServer: {
        host: 'localhost',
        port: port,
        open: true,
    },
};
    次にReactパッケージをインストールします.
    npm i react react-dom
    index.jsとApp.jsを作成します.
    // src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// src/App.js

import React from 'react';

const App = () => {
	return (
    	<div>Hello Webpack</div>
    )
}

export default App;
    最後はpublic/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>Document</title>
</head>
<body>
    <noscript>스크립트가 작동되지 않습니다!</noscript> 
    <!-- 스크립트를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용 -->
    <div id="root"></div>
</body>
</html>
    JavaScriptの適用、呼び出し＆バインド簡略化
    [JPA]JPA優先パラメータ