Here is the layout of my project:
\root
\webpack.config.js
\public
\ index.html
\ ...
\ css
\ directives
\ views
\ dist (webpack output)
\app.js
\ index.html
\ app.js.map
\ style.css
\ style.css.map
Whenever I use webpack-dev-server and launch it from /root, the app loads successfully. However, changes to sass or html files do not trigger a reload. What could be causing this issue in the webpack config?
To launch webpack, use the following command:
$ cd root
$ webpack-dev-server
This is the content of Webpack.config.js:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const webConfig = {
entry: path.join(__dirname, 'public', 'js', 'app'),
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'app.js'
},
resolve: {
modules: [__dirname, 'node_modules'],
extensions: ['.js'],
enforceExtension: false,
},
devtool: 'source-map',
devServer:{
contentBase: 'public/',
publicPath: 'public/'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader'
}),
exclude: /node_modules/
},
{
test: /\.html$/,
loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
}
]
},
plugins: [
new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
module.exports = webConfig;