webpackで環境構築の練習をしていまして、その中でwebpack-dev-serverを設定する際、ビルド(npm run start)すると原因不明のエラーが出ており
解決できずに手が止まっています。
原因わかる方、少しでも検討つく方いらっしゃいましたら、ご回答頂けますと幸いです。
よろしくお願いいたします。
エラー文
> getting-started-webpack@1.0.0 start /Users/hayashiyuugo/Documents/学習/getting-started-webpack > webpack-dev-server [webpack-cli] /Users/hayashiyuugo/Documents/学習/getting-started-webpack/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js:10 static heartbeatInterval = 1000; ^ SyntaxError: Unexpected token = at new Script (vm.js:79:7) at createScript (vm.js:251:10) at Object.runInThisContext (vm.js:303:10) at Module._compile (internal/modules/cjs/loader.js:656:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10) at Module.load (internal/modules/cjs/loader.js:598:32) at tryModuleLoad (internal/modules/cjs/loader.js:537:12) at Function.Module._load (internal/modules/cjs/loader.js:529:3) at Module.require (internal/modules/cjs/loader.js:636:17) at require (internal/modules/cjs/helpers.js:20:18) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! getting-started-webpack@1.0.0 start: `webpack-dev-server` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the getting-started-webpack@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/hayashiyuugo/.npm/_logs/2022-11-18T12_12_57_048Z-debug.log
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 : [ 'style-loader', MiniCssExtractPlugin.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", "start": "webpack-dev-server", "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" } }
回答1件
あなたの回答
tips
プレビュー