webpack 使用webpack-dev-server，能监听到文件变化，但浏览器没有刷新？
本文介绍了webpack 使用webpack-dev-server，能监听到文件变化，但浏览器没有刷新？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
保存文件后，能监听到文件的变化，浏览器没有自动刷新，是不是要每保存一次打包一次文件？
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},这是webpack命令行
以下是我的代码还有目录结构：
第一次提问，有没有大神来指导一下，谢谢！！！
解决方案
关于热部署和dev-server的配置，可以多看看webpack官网，链接如下:
另外，我稍作修改了一下你的配置，可以支持热部署刷新（其中还有很多可以优化的地方，js，css分目录等等，具体可查看官网）。
主要修改以下两个方面：
1、 path问题。你的path拼接的有问题, 形如__dirname + '/index.js'的拼接，你可以console看一下
2、 根据官网，热部署配置需要 1）添加plugin 2）设置hot为true
//第一步
plugins: [
new webpack.HotModuleReplacementPlugin() // Enable HMR
],
//第二步
devServer: {
hot: true, // Tell the dev-server we're using HMR
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
最后来说下，我对你配置的简单改变
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="/bundle.js"></script>
</body>
</html>webapck.config.js
var webpack = require('webpack');
var path = require('path');
console.log(path.resolve(__dirname, 'index.js'))
module.exports = {
devtool: 'eval-source-map',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': __dirname
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png)$/,
loader: 'url-loader?limit=8192'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
devServer: {
port: 8050,
host: 'localhost',
inline: true,
hot: true,
open: true,
historyApiFallback: true,
contentBase: path.resolve(__dirname),
publicPath: '/',
proxy: {
}
}
};
这篇关于webpack 使用webpack-dev-server，能监听到文件变化，但浏览器没有刷新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
