質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

658閲覧

Webpackのプラグイン 「mini-css-extract-plugin」エラーについて

yugo_0208

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/11/22 06:48

編集2022/11/22 06:50

Webpackで環境構築の練習をしているのですが、プラグインのmini-css-extract-pluginで原因がわからないエラーが出てしまっていて
調べてもイマイチわからない状況です。
Webpack詳しい方・解決方法、原因等わかる方いらっしゃいましたら、お気軽にご回答いただけますと幸いです。

エラー文

イメージ説明

webpack.config.js

const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { //mode mode : 'development', //development:ソースマップを生成し、再ビルド時間が短縮される //production: モジュールの圧縮、最適化される //entrypoint entry : './src/js/app.js', //出力の設定 output : { //出力先のpath path : path.resolve(__dirname, 'public'), //出力するファイル名 filename : 'js/bundle.js', clean : true }, devServer: { open : true, port : 9000, static : { directory: path.join(__dirname, "public") } }, module: { rules : [ { test : /\.scss$/, include : path.resolve(__dirname, 'src/scss'), use : [ { loader : MiniCssExtractPlugin.loader, options : { esModule: false, }, }, 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ], }, ], }, plugins : [ new MiniCssExtractPlugin({ filename: './css/style.css', }) ] }

package.json

{ "name": "getting-started-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "w": "webpack-dev-server --mode development", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^10.2.5", "css-loader": "^5.2.0", "mini-css-extract-plugin": "^2.7.0", "postcss": "^8.2.8", "postcss-loader": "^5.2.0", "sass": "^1.32.8", "sass-loader": "^11.0.1", "style-loader": "^2.0.0", "webpack": "^5.30.0", "webpack-cli": "^5.0.0", "webpack-dev-server": "^4.11.1" }, "dependencies": { "jquery": "^3.6.0" } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問