index.html using webpack-dev-server не перезагружается

Question

Когда я повторяю свои приложения.js и main.css, пока работает webpack-dev-сервер, пакет обновляется. Но когда я изменяю index.html, сервер не перезагружается, если я добавляю некоторую строку в html, webpack-dev-сервер не перезагружает страницу. Вот мои файлы webpack.config.js и package.json. Надеюсь, вы можете мне помочь.

webpack.config.js:

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var chalk = require('chalk'); 
var env = process.env.WEBPACK_ENV; 

var host = 'localhost'; 
var port = '8080'; 

var config = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://' + host + ':' + port +'/', 
    './src/app.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders: [ 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { test: /\.html$/,loader: 'file?name=[name].[ext]' } 
    ] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new CleanWebpackPlugin(['dist'], { 
     root: __dirname, 
     verbose: true, 
     dry: false 
    }) 
    ] 
}; 

if (env === 'dev') { 
    new WebpackDevServer(webpack(config), { 
    contentBase: './dist/', 
    stats: {colors: true}, 
    hot: true, 
    debug: true 
    }).listen(port, host, function (err, result) { 
    if (err) { 
     console.log(err); 
    } 
    }); 

    console.log('-------------------------'); 
    console.log(chalk.bold.white('Local web server runs at ') + chalk.green('http://' + host + ':' + port)); 
    console.log('-------------------------\n\n'); 
} 

module.exports = config; 

Package.json:

{ 
    "name": "webpack-skeleton", 
    "version": "1.0.0", 
    "description": "webpack skeleton", 
    "main": "bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "WEBPACK_ENV=dev ./node_modules/.bin/webpack --watch --inline" 
    }, 
    "author": "Jose Roa", 
    "license": "ISC", 
    "devDependencies": { 
    "chalk": "^1.1.3", 
    "clean-webpack-plugin": "^0.1.9", 
    "css-loader": "^0.23.1", 
    "file-loader": "^0.8.5", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

моя структура каталогов:

css 
    main.css 
dist 
    bundle.js 
    bundle.js.map 
    index.html 
node_modules 
src 
    app.js 
    sum.js 
package.json 
index.html 
node_modules 
webpack.config.js 

каждый файл внутри dist директории генерируется WebPack

Answer 1

добавить ссылку HtmlWebpackPlugin : https://www.npmjs.com/package/html-webpack-plugin добавить

// webpack.config.js 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }) 
    ] 
}; 

Answer 2

Это может быть связано с вашей IDE - см webpack dev server

Работа с редакторами/Иды поддержки «безопасной записи» ... Это поведение заставляет файл наблюдателя терять трек, потому что исходный файл удален. Чтобы предотвратить эту проблему, вам необходимо отключить функцию «безопасная запись» в вашем редакторе.

Answer 3

Вы можете попробовать это обходное решение для автоматической перезагрузки при разработке приложения. Добавить к точке входа ('./src/app.js '):

require('../index.html'); //workround to reload page on index.html changes