最近在用webpack进行打包React的时候，遇到webpack-dev-server不能自动刷新的问题，输入webpack-dev-server后可以打包，但浏览器就是死活不刷新，手动刷新也没有效果，折腾了好几个小时才搞定，因为也刚接触webpack，遇到问题也蛮正常的，但是确实挺折磨人的。哈哈，话不多说，下面看具体的解决办法，当然，我用的是webpack最新版3.11.0.
1.首先得安装webpack-dev-server
npm i webpack-dev-server --save-dev
2.在项目的package.json文件里添加
"scripts": {
"start": "webpack-dev-server --inline --content-base"
}
3.在入口index.html文件中引入bundle.js,必须是根目录下的。
<script src="bundle.js" charset="utf-8"></script>
4.总结：output中配置的打包路径只在手动打包时起作用，而webpack-dev-server自动打包的开发环境下的bundle.js,路径由contentBase指定。
下面是配置源码：
const webpack = require("webpack");
const path = require("path");
const config = {
entry: `${__dirname}/src/js/index.js`,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react','env']
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, "./"),
compress: true,
port: 3000
}
};
module.exports = config;
插一句，编译jsx用的是
npm i babel-loader babel-core bable-preset-env babel-preset-react --save
