More than 1 year has passed since last update.

ReactとWebpack

Posted at 2022-11-21

npm init

npm install react react-dom

npm install --save-dev webpack webpack-cli html-webpack-plugin css-loader style-loader

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

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: { presets: ['@babel/preset-env', '@babel/react'] },
                    },
                ]
            },
        ],
    },
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="root"></div>
    <script defer src="/dist/index.bundle.js"></script>
  </body>
</html>

src/index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './app.js';

const root = createRoot(
    document.getElementById('root')
);

const element = <App />;
root.render(element);

src/app.js

import React from 'react';

const App = () => {
    return(
        <div><h1>Hello World React</h1></div>
    )
}

export default App;

ビルド

npx webpack

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up