Задать вопрос
@Dark19

Почему webpack-dev-server не обновляет страницу при изменениях?

Доброго времени суток. Локально работаю с webpack-dev-server, так как собираю все вебпаком на продакшн. Когда запускаю сервер с модами --inline --hot --progress для разработки, то он запускается нормально по localhost:8080, но когда я делаю изменения в файлах, то сервер не перекомпилирует приложение и мне приходится перезапускать его. Подскажите почему так? Как сделать автоперекомпиляцию файлов при смене кода?
Вот package.json:
{
  "name": "angular2-starter",
  "version": "0.2.5",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/mirkonasato/angular2-course-webpack-starter.git"
  },
  "private": true,
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "cross-env APP_ENVIRONMENT=production webpack -p --progress",
    "postinstall": "typings install",
    "serve": "webpack-dev-server --inline --hot --progress"
  },
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/compiler-cli": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/platform-server": "2.2.3",
    "@angular/router": "3.2.3",
    "core-js": "2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ngtools/webpack": "1.1.9",
    "angular2-perfect-scrollbar": "^1.1.0",
    "angular2-template-loader": "0.6.0",
    "cross-env": "3.1.3",
    "enhanced-resolve": "3.0.0",
    "html-webpack-plugin": "2.24.1",
    "raw-loader": "0.5.1",
    "rimraf": "2.5.4",
    "ts-loader": "1.3.0",
    "typescript": "2.0.10",
    "typings": "2.0.0",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "^2.1.0-beta.12"
  }
}

Вот webpack.config.js:
var webpack = require('webpack');
var ngToolsWebpack = require('@ngtools/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var appEnvironment = process.env.APP_ENVIRONMENT || 'development';
var isProduction = appEnvironment === 'production'; 

var webpackConfig = {

  entry: {
    'app': './src/main.ts',
    'polyfills': [
      'core-js/es6',
      'core-js/es7/reflect',
      'zone.js/dist/zone'
    ]
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: isProduction ? '@ngtools/webpack' : ['ts-loader', 'angular2-template-loader'] },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'raw-loader' }
    ]
  },
  resolve: {
    extensions: [ '.js', '.ts', '.html', '.css' ]
  },
  plugins: [
    // see https://github.com/angular/angular/issues/11580
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      './src'
    ),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'polyfills'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(appEnvironment)
      }
    })
  ],
  watch: true
  
};

if (isProduction) {
  webpackConfig.plugins.push(new ngToolsWebpack.AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: './src/app/app.module#AppModule'
  }));
}

module.exports = webpackConfig;

Вот структура проекта: prntscr.com/dmoawf
  • Вопрос задан
  • 2761 просмотр
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
@edk55
Возможно, стоит не в конфиге указывать watch: true, а в командной строке дописать --watch
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы