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

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

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

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

解決済

webpack利用で、bundle.jsが出力されない事象

souta-haruran
souta-haruran

総合スコア87

JavaScript

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

1回答

0リアクション

0クリップ

3583閲覧

投稿2020/09/02 10:38

###bundle.jsが出力されない事象
ローカル環境の構築をしており、webpackを利用しています。
これから示すディレクトリ構成とコードで進めているのですが、bundle.jsが出力されません。

正確には、ローカルのディレクトリに吐き出されません。

どこが設定など間違っているのか教えてもらえると幸いです。

###ディレクトリ構成

- test/ ├ assets/ ├ index.html ├ js/ └ ※ここにbundle.jsが出力されるものと認識している ├ css/ └ style.css ├ json/ └ jsonfile.json ├ src/ ├ js/ ├ common.js ├ index.js └ scss/ └ style.scss ├ package.json ├ webpack.config.js └ gulpfile.js

###該当のソースコード

javascript

// webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'assets/js'), filename: 'bundle.js' }, devServer: { host: '0.0.0.0', port: 3000, contentBase: path.resolve(__dirname, 'assets') }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')({ grid: true }) ] } } ] }, { test: /.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { url: false } } ] } ], }, };

javascript

// index.js window.addEventListener('DOMContentLoaded', () => { console.log('test'); });

html

<!doctype html> <html> <head></head> <body> <div>テスト</div> </body> <script src="bundle.js"></script> </html>

json

{ "name": "test", "version": "1.0.0", "main": "index.js", "scripts": { "start": "npx webpack-dev-server", "watch": "npx webpack-dev-server --open --hot" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.11.5", "@babel/plugin-transform-modules-commonjs": "^7.10.4", "@babel/preset-env": "^7.11.5", "autoprefixer": "^9.8.6", "babel-loader": "^8.1.0", "babel-plugin-module-resolver": "^4.0.0", "css-loader": "^4.2.2", "gulp": "^4.0.2", "gulp-postcss": "^8.0.0", "gulp-sass": "^4.1.0", "node-sass": "^4.14.1", "postcss-loader": "^3.0.0", "sass-loader": "^10.0.1", "style-loader": "^1.2.1", "webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "keywords": [], "description": "" }

###試したこと
http://0.0.0.0:3000/ にアクセスするとページは正常に表示され、index.jsに書いているものも反映されているようです。
chromeの開発者ツールでネットワークをみると、bundle.jsが読み込まれていることが確認できます。
イメージ説明

###補足情報(言語/FW/ツール等のバージョンなど)
FWは使っていません。
言語はJavaScriptのみです。(html, cssは除く)

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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