Live reloading - webpack -dev-server

Question

Witam!

Ma ktoś pomysł dlaczego nie działa live reloading w webpacku oraz kompilacja do bundle.js podczas zapisywania plików? 

Kompilacja działa tylko wtedy gdy za każdym razem wpiszę komendę 'webpack'. A chciałbym, żeby komenda 'npm start' odpalała kompilację i webpack-dev-server.

Poniżej kod z plików package.json oraz webpack.config.js

// PACKAGE.JSON

{
  "name": "react-playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.2.0",
    "webpack-dev-server": "^2.5.1"
  }

}



// WEBPACK.CONFIG.JS

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        //publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

 

Answer 1

Czemu z poziomu jednego skryptu npm odpalasz inny skrypt npm i nic poza tym? Po co Ci taki alias?
Do odpalenia webpack-dev-server nie potrzebujesz najpierw odpalać webpacka.
Ja podzieliłbym to na dwa oddzielne skrypty:
-build, który odpala webpacka właśnie
-start, który odpala webpack-dev-server

Dwóch tych narzędzi używa się w dwóch różnych sytuacjach:
-webpack buduje Twój projekt i wypluwa stosowne pliki gotowe do deployu
-webpack-dev-server ładuje Twój projekt do pamięci i stamtąd go odpala (nie potrzebujesz do tego zbudowanego już projektu)