[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

すいませんが、情報が不足していましたらコメントお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

expressはNode.js用のフレームワークで、ブラウザ内では動きません。

ブラウザ内で使うJavaScriptに、expressを使う必要性はありません（サーバサイドはwebpack-dev-serverが引き受けてくれます）。

投稿2018/11/13 00:09

maisumakun

総合スコア145183

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

[Webpack] buildでエラーにならないのですが、Chromeコンソールを開くとエラーが表示される

聞きたいこと

関連した質問