Lost another day by figuring out how to set up webpack-dev-server with hot reload. I would like to serve my JS and CSS assets in index.html with following paths: /dist/js/app.min.js and /dist/css/styles.min.css.
How the hell I am suppose to configurate webpack.config.js to load my assests in index.html with correct paths mentioned above? With current configuration webpack-dev-server is holding my build inside /dist folder only and in index.html I have to set paths without js or css folder, e.g.: (<script src="/dist/app.min.js" />).
My webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, './'),
entry: './src/app.js',
output: {
publicPath: '/dist/',
path: path.join(__dirname, '/dist/js'),
filename: 'app.min.js'
},
devServer: {
hot: true
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.(scss|sass|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
My project structure:
