Answer the question
In order to leave comments, you need to log in
Why is there no reload after changing sass in webpack?
Good day.
Changing style.sass does not automatically reload the page.
If you start it again, everything works without errors
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry : {
app: './src/index.js',
another: './src/anotherMOdule.js'
},
output : {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path : path.resolve (__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin (['dist/*.*']),
new HtmlWebpackPlugin ({
title: 'Output Management'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin("styles.css"),
// new BundleAnalyzerPlugin()
],
module : {
rules: [
{
test: /\.sass$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use : [
'file-loader'
]
},
{
test: /\.(png|jpg|svg|gif)$/,
use : [
'file-loader'<code lang="javascript">
]
}
]
}
};
Использую dev-server:
"start": "webpack-dev-server --open --config webpack.dev.js"
Answer the question
In order to leave comments, you need to log in
1) why do you need extractTextPlugin in develop mode? If there is no need, then replace it with scss and style loaders, like this:
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
include: path.join(__dirname, 'src'), // ваша директория тут
},
webpack-dev-server --open --hot --config webpack.dev.js
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question