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" } }
あなたの回答
tips
プレビュー