Hot reloald webpac-dev-server when changing sass - reactjs

Question

i have simple webpack build with webpack-dev-server. It's work, and when i changing .js file its autorefreshingin browser. But when i changhing .sass nothing happens. Here is my webpack.confing
const { resolve } = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const config = {
devtool: 'cheap-module-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./main.js',
'./assets/sass/main.sass',
],
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist'),
publicPath: '/',
},
context: resolve(__dirname, 'app'),
devServer: {
hot: true,
contentBase: resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
loaders: [
'babel-loader',
],
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'sass-loader',
query: {
sourceMap: false,
},
},
],
}),
},
{ test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' },
]
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }),
new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]),
new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
new webpack.HotModuleReplacementPlugin(),
],
};
module.exports = config;
Also, please tell me how to make the files get in the right folders during the build (.css to dist/css, js to dist/js), 'cuz rigth now they all go to the root of dest folder.

Answer 1

Hot reloading doesn't work with extract-text-webpack-plugin. You should not use it in development and you can easily disable it by setting the disable option to true in development. You can use an environment variable like so:
new ExtractTextPlugin({
filename: 'style.css',
disable: process.env.NODE_ENV !== 'production',
allChunks: true
}),
This will only extract the CSS in production mode, so you'd need to run your production build with:
NODE_ENV=production webpack [options]
Or if you are on windows:
set NODE_ENV=production && webpack [options]
There is also cross-env if you look for a cross platform solution.
For getting the JavaScript files to dist/js and the CSS file to dist/css you could set output.path to dist/js and then tell extract-text-webpack-plugin to generate the file into ../css/style.css.
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist/js'),
publicPath: '/',
},
plugins: [
new ExtractTextPlugin({
filename: '../css/style.css',
disable: process.env.NODE_ENV !== 'production',
allChunks: true
}),
// other plugins
]