If i use npm start and go to http://localhost:8080 + make and save changes webpack don't replace files but if i use webpack --watch all is ok
// webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const postCSS = new ExtractTextPlugin('../css/styles.bundle.css');
module.exports = {
devServer: {
port: 8080
},
entry: {
app: './assets/src/js/app.js'
},
output: {
path: path.resolve(__dirname, 'assets/dist/js'),
filename: '[name].bundle.min.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'env', 'stage-0', 'react']
}
}
},
{
test: /\.css$/i,
include: [
path.resolve(__dirname, 'assets/src/css'),
],
use: postCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
config: {
path: 'postcss.config.js'
}
}
}, 'postcss-loader',
],
}),
}
],
},
plugins: [
postCSS
]
};
// package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "/src/client.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "killall -KILL node; webpack-dev-server --inline --hot --watch-poll"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"jquery": "^3.3.1",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.10",
"postcss-nested": "^3.0.0",
"postcss-plugin": "^1.0.0",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"bootstrap": "^4.0.0",
"popper.js": "^1.12.9",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2"
}
}
Im having this problem too
i can fix this issue after reading documentation right here : https://webpack.js.org/configuration/dev-server/
its turn to be configuration need both contentBase & publicPath. here is configuration that work for me :
devServer:{
contentBase: path.join(__dirname, "app"),
publicPath: "/public/",
compress: true,
port: 8080
},
Our issue template states that questions should be asked on StackOverflow.