webpack.config.jsによるコンパイルエラーについて

Question

前書き

以前、webpack.config.jsのJSX部分が上手くコンパイルされないという現象で質問させて頂きました。
その時頂いた回答を元に、babel7でコンパイルするようにJSONやwebpack.config.jsの記述を変更しなおしたのですが、またもやエラーが吐き出されてしまいました...。
何度も同じような質問をするのは心苦しいですが、どうしても分からないため質問させて頂きます。

.node_modules/.bin/webpack -p　を打つと、このような感じで表示されました。

なんとなくCSS関連の問題のような気はしているのですけど、どうでしょうか？

自分なりに検索してみた

自分なりにちょっと調べてみました。
index.jsの中でインポートしているCSSが、どうやらwebpackの方で上手く読み込み・変換がされていないと判断したため、npm installにてcss/styleのローダーをインストールしてみました。

$ npm install --save-dev css-loader
$ npm install --save-dev style-loader

JSONとwebpack.config.js

前回頂いた回答をふまえて、package.jsonはこのようにしました。

 /// 上は省略
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
};

前回頂いた回答をふまえて、webpack.config.jsはこのようにしています。

const path = require("path");

module.exports = {
  mode: 'production',
  module: {
    rules: [
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./src"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  }
};

正直言ってwebpack.config.jsの部分がよく分かっていません...。
変な記述をしていたらすみません。

最後に

npmやjsonやwebpack関連など、個人的に慣れない部分ばかりで雑な質問になっている気がします。
その点申し訳ないのですが、どうかご回答して頂けるとこちらとしては大変助かります。

よろしくお願いいたします。

Answer 1

index.jsにインポートされているcssを読み込むのだからこのように書けば良いのではないでしょうか。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./src"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'] 
      }
    ]
  }
};

Comments

[HoroHoro0316]

ありがとうございます。さっそくやってみます！

[HoroHoro0316]

やってみたところ、上手くbundle.jsを生成することができました。
ありがとうございました！