index.html使用webpack-dev-server無法重新加載

當我在webpack-dev-server運行時吟誦app.js和main.css時，該軟件包已更新。但是，當我更改index.html服務器不重新加載，如果我添加一些行的HTML webpack-dev-server不重新加載頁面。這是我的webpack.config.js和package.json文件。我希望你能幫助我。index.html使用webpack-dev-server無法重新加載

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

產生

來源

2016-05-13 pedro luis

添加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' 
     }) 
    ] 
};

來源

2016-05-19 19:14:16

它可以是由於你的IDE - 見webpack dev server

與編輯/ IDE的支持工作「安全寫」 ......這種行爲導致文件觀察器失去原來的文件被刪除的軌道。爲了防止這個問題，你必須在編輯器中禁用「安全寫入」功能。

來源

2016-05-30 12:20:18

您可以在開發應用程序時嘗試此自動重新加載的解決方法。添加到你的入口點（'./src/app.js'）：

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

來源

2016-07-14 15:40:38

'''require（'file！../ index.html'）;'''如果你沒有加載程序設置爲html文件 –

index.html使用webpack-dev-server無法重新加載

回答

相關問題