反応せずに反応アプリのウェブパック5

17096 ワード
react webpack テキストリンク
我々はWebPack 5で反応アプリを作成するつもりです.
あなたがちょうどコピーしたいならば、コードはここにあります、そして、ここでページはwebpack config fileとbabel config fileです
これらのモジュールの理由を知りたいなら、そこで夜明けを読んでください.

チュートリアル
フォルダを作成
mkdir webpack5
cd webpack5
npm init -y
以下のモジュールをインストールします
npm i react react-dom

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader html-webpack-plugin mini-css-extract-plugin react-hot-loader webpack webpack-cli webpack-dev-server --save-dev
  • @babel/core @babel/preset-env @babel/preset-reactは、現代のJavaScript
    • をコンパイルできます
  • babel-loaderはJavaScriptファイルを転送することができます
  • clean-webpack-pluginビルドフォルダを削除/クリーンできます
  • css-loader mini-css-extract-pluginは、我々のプロジェクト
    • でCSSを使用するのを許します
  • file-loaderは、我々のプロジェクト
    • でイメージの使用を許します
  • html-webpack-pluginインデックスを作成できます.我々のビルドフォルダ
    • のHTML

  • 我々はWebpackモジュールXDを使用する必要がありますので、WebPackを使用しているwebpack webpack-cli webpack-dev-server.Webpackコマンドを使用してWebPackコマンドとWebPack devサーバーを使用して、WebPackを使用してモードを開発しました.
  • react-hot-loaderは、リアルタイム
    • のアップデート反応コンポーネントを許します
    すべての依存関係をインストールした後、WebpackファイルとBabelファイルを作成しました
    touch webpack.config.js .babelrc
    今、私たちはテンプレートを作成し、これは、反応は、DOM
    mkdir public
cd public
touch index.html
    そして、基本的なHTMLファイル構造を作成します
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <!--this is the div that React is going to take-->
    </body>
</html>
    Webpackファイルでは次のように書きます.
    const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    //our index file
    entry: path.resolve(__dirname, "src/index.jsx"),
    //Where we put the production code
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.[contenthash].js",
        publicPath: "/",
    },
    // This says to webpack that we are in development mode and write the code in webpack file in different way
    mode: "development",
    module: {
        rules: [
            //Allows use javascript
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/, //don't test node_modules folder
                use: {
                    loader: "babel-loader",
                },
                resolve: {
                    extensions: [".js", ".jsx"],
                },
            },
            //Allows use of CSS
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader",
                ],
            },
            //Allows use of images
            {
                test: /\.(png|jpg|svg)$/i,
                loader: "file-loader",
            },
        ],
    },
    plugins: [
        //Allows remove/clean the build folder
        new CleanWebpackPlugin(),
        //Allows update react components in real time
        new HotModuleReplacementPlugin(),
        //Allows to create an index.html in our build folder
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public/index.html"), //we put the file that we created in public folder
        }),
        //This get all our css and put in a unique file
        new MiniCssExtractPlugin({
            filename: "styles.[contentHash].css",
        }),
    ],
    //Config for webpack-dev-server module
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        port: 8000,
    },
};
    現在、我々はこれを書きます.ベーベック
    {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
    そして最後に、コマンドを書きます
    "scripts": {
    "dev": "webpack serve --open chrome",
    "build": "webpack --mode production",
    "start": "npm run dev"
},
    そして、それは、我々の設定があります.
    今私たちが行うつもりは、私たちが行った設定が動作しているかどうかチェックします.

    動くか
    簡単な答え
    ロングアンサー
    我々は、我々が使用しているフォルダとファイルを作成します
    mkdir src
cd src
touch index.jsx App.jsx styles.css
cd ..
    次のコードを書きます
  • インデックス.日本学術振興会
    • import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

module.hot.accept();
  • アプリ.日本学術振興会
    • import React from "react";
import "./Styles.css";

const App = () => {
    return (
        <div>
            <h1>Hello world</h1>
        </div>
    );
};

export default App;
  • スタイル.CSS
    • body {
    background-color: black;
}
h1 {
    color: white;
}
    コマンドを実行する
    npm run dev
    そして、我々は、このアプリケーションがあります

    ボーナス
    あなたの反応アプリにもっと機能性を追加する場合は、ここではあなたを助けることができるいくつかのモジュールがあります.

  • dotenv-webpack、それを使用するには、単にWebPackファイルで必要とプラグインとして追加する必要があります.
    • //some code...
const Dotenv = require('dotenv-webpack');
//some code...

plugins: [
  //plugin...
  new Dotenv(),
  //plugin...
],
    白駿24040号のきれいなケーキ
    Tinkerを導入した後、DebugモードでInstant Runをオンにする方法