

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

## やりたいこと

webpack及びその周辺技術を用いて、  
\- js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる  
\- 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる

## やったこと

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

[![ディレクトリ](https://i.stack.imgur.com/KDrWq.jpg)](https://i.stack.imgur.com/KDrWq.jpg)

package.json

[code]

    {
      "name": "pf",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "scripts": {
        "start": "./node_modules/.bin/webpack-dev-server"
      },
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "browser-sync": "^2.18.13",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "import-glob-loader": "^1.1.0",
        "node-sass": "^4.7.2",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.1",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.9.7"
      }
    }
    
[/code]

webpack.config.js

[code]

    const path = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    const publicDir = path.join(__dirname, '/public');
    module.exports = [
      {
        entry: [
          './javascript/index.js',
          './javascript/skrollr.min.js',
        ],
        output: {
          path: publicDir,
          publicPath: '/',
          filename: 'bundle.js',
        },
        module: {
          loaders: [{
            exclude: /node_modules/,
            loader: 'babel-loader',
          }],
        },
        resolve: {
          extensions: ['.js'],
        },
        devServer: {
          historyApiFallback: true,
          contentBase: './',
          inline: true,
          hot: true,
        },
      },
      {
        entry: {
          style: './stylesheets/index.scss',
        },
        output: {
          path: publicDir,
          publicPath: '/',
          filename: 'bundle.css',
        },
        module: {
          loaders: [
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
            },
            {
              test: /\.scss$/,
              loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }),
            },
          ],
        },
        plugins: [
          new ExtractTextPlugin('bundle.css'),
        ],
      },
    ];
    
[/code]

## 症状

`yarn run
start`後、index.js及びindex.scssの変更・保存時にコンパイルのようなログが流れるものの、bundle.jsやbundle.cssは更新されていない(ブラウザで確認しても変化していない)。  
また、ブラウザも自動でリロードされない。  
ログ  
[![画像の説明をここに入力](https://i.stack.imgur.com/enJxz.jpg)](https://i.stack.imgur.com/enJxz.jpg)

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


CC BY-SA 3.0
2017-12-20T01:35:26.297
40402
2019-12-18T08:00:43.190
26714
question
javascript css npm webpack
webpack-dev-serverで自動コンパイル・画面更新できない


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


CC BY-SA 3.0
2017-12-20T02:26:35.977
40403
2017-12-20T02:26:35.977
26714
40402
answer