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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

598閲覧

webpack-dev-serverで自動コンパイル・画面更新できない

namenamenameko

総合スコア234

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/18 15:41

この度フロントエンドに入門しようとしています。

やりたいこと

webpack及びその周辺技術を用いて、

  • js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる
  • 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる

やったこと

以下のようにyarnとwebpackで環境構築をしました。

ディレクトリ

JS

1// package.json 2{ 3 "name": "pf", 4 "version": "1.0.0", 5 "main": "index.js", 6 "license": "MIT", 7 "scripts": { 8 "start": "./node_modules/.bin/webpack-dev-server" 9 }, 10 "dependencies": { 11 "babel-core": "^6.26.0", 12 "babel-loader": "^7.1.2", 13 "browser-sync": "^2.18.13", 14 "css-loader": "^0.28.7", 15 "extract-text-webpack-plugin": "^3.0.2", 16 "import-glob-loader": "^1.1.0", 17 "node-sass": "^4.7.2", 18 "sass-loader": "^6.0.6", 19 "style-loader": "^0.19.1", 20 "webpack": "^3.10.0", 21 "webpack-dev-server": "^2.9.7" 22 } 23} 24

JS

1const path = require('path'); 2const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 4const publicDir = path.join(__dirname, '/public'); 5module.exports = [ 6 { 7 entry: [ 8 './javascript/index.js', 9 './javascript/skrollr.min.js', 10 ], 11 output: { 12 path: publicDir, 13 publicPath: '/', 14 filename: 'bundle.js', 15 }, 16 module: { 17 loaders: [{ 18 exclude: /node_modules/, 19 loader: 'babel-loader', 20 }], 21 }, 22 resolve: { 23 extensions: ['.js'], 24 }, 25 devServer: { 26 historyApiFallback: true, 27 contentBase: './', 28 inline: true, 29 hot: true, 30 }, 31 }, 32 { 33 entry: { 34 style: './stylesheets/index.scss', 35 }, 36 output: { 37 path: publicDir, 38 publicPath: '/', 39 filename: 'bundle.css', 40 }, 41 module: { 42 loaders: [ 43 { 44 test: /.css$/, 45 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }), 46 }, 47 { 48 test: /.scss$/, 49 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }), 50 }, 51 ], 52 }, 53 plugins: [ 54 new ExtractTextPlugin('bundle.css'), 55 ], 56 }, 57];

症状

yarn run start後、index.js及びindex.scssの変更・保存時にコンパイルのようなログが流れるものの、bundle.jsやbundle.cssは更新されていない(ブラウザで確認しても変化していない)。
また、ブラウザも自動でリロードされない。
ログ
ログ

ネットで色々調査して改変などしましたが、バージョンなどの差なのかうまく動作しません。どなたかご教授をお願いいたします。。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決:
index.htmlをpublic/に移動し、contentBase: publicDirとすることでやりたいことが突然満たされました。理由は謎ですが・・・。

投稿2017/12/20 02:25

namenamenameko

総合スコア234

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問