質問編集履歴

1 文章の修正

sabx

sabx score 179

2018/11/13 09:05  投稿

[Webpack] buildでエラーにならないのですが、Chromeコンソールを開くとエラーが表示される
### 聞きたいこと
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
```
```
すいませんが、情報が不足していましたらコメントお願いいたします。
  • JavaScript

    32818 questions

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

  • webpack

    625 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る