reactでwebpackの設定

webpackをインストール

以下のコマンドを実行
＊webpack v4以降からはCLIもインストールする必要があるみたい。

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

次にwebpack.config.jsを作成

touch webpack.config.js

次に下記のコマンドを実行し、また.Babelrcを作成する。

//babelrcをインストール
npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin

//.Babelrcファイルを作成
touch .Babelrc

今回、buildしたときにcssが原因でエラーが出ていたのでstyle-loaderを追加した。
↓その他のloader
https://webpack.js.org/loaders/

npm i -D webpack webpack-cli style-loader css-loader

webpack.config.jsに以下を貼り付け

const path = require('path');
module.exports = {
    mode: 'development',
    entry: [
        './src/index.js'
    ],
    output: {
        path: path.join(__dirname + '/dist'),
        filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [['@babel/preset-env', { modules: false }]]
              }
            }
          ]
        },
        // buildした際にcssでエラーが発生していたためstyle-loaderを追加
        {
        test: /\.css/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { url: false }
          }
        ]
      }
      ]
    },
    resolve: {
        extensions: ['.js', '.jsx'] // use js, jsx file
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        contentBase: path.join(__dirname, '/dist'),
        watchContentBase: true,
        inline: true,
        hot: true,
    },
    
    plugins: [
    ], 
};

packeg.jsonのbuildコマンドを修正

"scripts": {
    "start": "start", 
    "build": "webpack --mode production",
    "test": "test",
  }

これでいけるはず