聞きたいこと
webpackでビルドした後に、webpack-dev-serverを起動すると、Chromeコンソールにエラーが下のように表示されます。
- エラー
Uncaught ReferenceError: require is not defined at Object.events (external "events":1) at __webpack_require__ (bootstrap:19) at Object../node_modules/depd/lib/compat/index.js (index.js:14) at __webpack_require__ (bootstrap:19) at Object../node_modules/depd/index.js (index.js:11) at __webpack_require__ (bootstrap:19) at Object../node_modules/body-parser/index.js (index.js:14) at __webpack_require__ (bootstrap:19) at Object../node_modules/express/lib/express.js (express.js:15) at __webpack_require__ (bootstrap:19)
実装したファイルは下の通りです。
- package.json
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server --open" }, "author": "", "license": "MIT", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.0.4", "babel-preset-env": "^1.7.0", "express": "^4.16.3", "webpack": "^4.20.2", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.10" } }
- webpack.config.json
const path = require('path'); module.exports = { context: __dirname + '/src', mode: 'development', entry: { js: './src/js/main.js', }, output: { path: path.join(__dirname, 'public/js'), filename: 'bundle.js' }, module: { loaders: [{ test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'stage-0'] } }] } }
- main.js
import express from 'express' const app = express() app.get('/', (req, res) => res.send('Hello World!')) app.listen(3000, () => console.log('Example app listening on port 3000!'))
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Super Mario</title> </head> <body> <script src="./js/bundle.js"></script> </body> </html>
また、ディレクトリ構成は以下の通りです。
project/ ├ node_module/ ├ public/ ├ js/ │ └ bundle.js └ index.html ├ src/ │ └ js/ │ └ main.js ├ package-lock.json └ package.json
すいませんが、情報が不足していましたらコメントお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。