index.html с использованием webpack-dev-server не перезагружать

Когда я меняю свои app.js и main.css во время работы webpack-dev-server, пакет обновляется. Но когда я меняю index.html, содержимое не обновляется; если я добавлю строку в HTML, webpack-dev-server ничего не обновит на странице. Вот мои файлы 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.


webpack javascript html-webpack-plugin webpack-hmr webpack-dev-server
person pedro luis    schedule 13.05.2016    source источник

Ответы (3)


arrow_upward
5
arrow_downward

добавьте ссылку 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'
        })
    ]
};
person Andrea Valentini    schedule 19.05.2016

arrow_upward
1
arrow_downward

Это может быть связано с вашей IDE - см. сервер разработки веб-пакетов

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

person Z Saidane    schedule 30.05.2016

arrow_upward
0
arrow_downward

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

require('../index.html'); //workround to reload page on index.html changes
person Gleb Zykov    schedule 14.07.2016
comment
require('file!../index.html'); если у вас не настроен загрузчик для файлов HTML - person David Burrows; 08.09.2016