I can't get webpack dev server to work properly. I think the issue is the compiled code it makes in memory is not clearing. I can't work out where I'm going wrong.
My config file is:
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/",
filename: 'js/index.js'
},
devServer: {
contentBase: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/styles.css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})
]
}
And my scripts:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
What I want is for webpack dev server to allow me to live reload as I work, then use build to actually compile my code. The problem is, as soon as I use dev or build, and my dist file is made, webpack dev server stops working - even if I delete the dist file. I simply don't know how to get it to work. Would really appreciate any help.
Thanks, R
Maybe you are not running the webpack bundler(not webpack-dev-server) in watch mode
use watch mode
{
watch: true
}
and install concurrently package
npm i -D concurrently
update your start
script
{
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"dev:server": "webpack-dev-server",
"start": "concurrently \"npm:dev\" \"npm:dev:server\""
}