browser-sync is not reloading now and then...
Teun87 opened this issue · comments
The plugin does not reload my browser all the time. When I change the (S)CSS or .TWIG/HTML browsersync is very inconsistent in reloading the browser. Sometimes I need to save my files multiple times to see the changes. I already tried to put the delay-option on, disabled all the unnecessary plugins, but without luck.
Package.json:
"name": "Test",
"version": "1.0.0",
"description": "Test website",
"scripts": {
"watch": "cross-env NODE_ENV=development webpack --progress --hide-modules --watch",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"main": "index.js",
"author": "Teun",
"license": "MIT",
"dependencies": {
"fontfaceobserver": "^2.0.9",
"lost": "^8.0.0",
"vue": "^2.3.3"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.18.12",
"browser-sync-webpack-plugin": "^1.1.4",
"clean-webpack-plugin": "^0.1.16",
"cross-env": "^5.0.0",
"css-loader": "^0.28.1",
"eslint": "^3.19.0",
"eslint-loader": "^1.7.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"img-loader": "^2.0.0",
"node-sass": "^4.5.3",
"path": "^0.12.7",
"postcss-cssnext": "^2.11.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.5",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.5",
"style-loader": "^0.17.0",
"stylelint-config-lost": "^0.0.3",
"stylelint-config-standard": "^16.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5",
"webpack-manifest-plugin": "^1.1.0",
"webpack-merge": "^4.1.0"
}
}
Webpack config
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const env = process.env.NODE_ENV;
// Change paths here, not in config objects below
const PATHCONFIG = {
SRC_ROOT: path.resolve(__dirname, 'src'),
BUILD_ROOT: path.resolve(__dirname, 'public/dist'),
BUILD_IMAGES: './template-images',
PROXY_ADDRESS: 'http://test.dev'
};
const commonConfig = merge([
{
entry: {
app: [
`${PATHCONFIG.SRC_ROOT}/js/app.js`,
`${PATHCONFIG.SRC_ROOT}/scss/app.scss`
]
},
output: {
filename: '[name].js',
path: `${PATHCONFIG.BUILD_ROOT}`
},
module: {
rules: [
// JS
{
test: /\.js$/,
exclude: '/node-modules',
loader: "babel-loader"
},
// IMAGES with optimizer for every described format (runs in production only)
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: `${PATHCONFIG.BUILD_IMAGES}/[name].[ext]`
}
},
{
loader: 'img-loader', // Default settings for image optimization/minification. Check https://github.com/thetalecrafter/img-loader for config
options: {
enabled: (env === 'production')
}
}
]
},
// Fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader?name=fonts/[name].[ext]'
]
},
// CSS/SCSS
{
test: /\.s?css$/,
use: ExtractTextPlugin.extract({
use: [
{ loader: 'css-loader', options: { importLoaders: 1, minimize: (env === 'production'), sourceMap: (env === 'production') } },
'resolve-url-loader',
'sass-loader?sourceMap',
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
cssnext: {
warnForDuplicates: false,
features: {
autoprefixer: false
}
},
autoprefixer: {},
lost: {}
}
}
}
}
]
})
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
//new plugins.jsonManifest
new ManifestPlugin()
// OPTIONAL PLUGINS
// Make jQuery work with Webpack. Only include if jQuery is necessary
// new webpack.ProvidePlugin({
// $: "jquery",
// jQuery: "jquery",
// "window.jQuery": "jquery"
// })
]
// Select full version of vue instead of the (default) runtime-only build
// resolve: {
// alias: {
// 'vue$': 'vue/dist/vue.esm.js'
// }
// }
}
]);
const developmentConfig = merge([
{
devtool: 'eval-source-map',
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: '/node_modules',
loader: "eslint-loader",
options: {}
},
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
// CSS linting
new StylelintPlugin(),
new BrowserSyncPlugin({
notify: false,
proxy: `${PATHCONFIG.PROXY_ADDRESS}`,
}, {
files: [
'craft/templates/**/*.twig',
'public/dist/**/*.js',
'public/dist/**/*.css'
]
})
]
}
]);
const productionConfig = merge([
{
devtool: 'source-map',
output: {
filename: '[name].[chunkhash].js'
},
plugins: [
// Cleanup dist folder
new CleanWebpackPlugin([`${PATHCONFIG.BUILD_ROOT}`], {
root: __dirname,
exclude: [ 'app.js', 'app.css', 'vendor.js', 'manifest.js' ] // Do not cleanup the dev files by default
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new ExtractTextPlugin('[name].[contenthash].css')
]
}
]);
module.exports = () => {
console.log(env);
if (env === 'production') {
return merge(commonConfig, productionConfig);
}
return merge(commonConfig, developmentConfig);
};
Using Homestead and newest versions of NodeJS and NPM.
Any help would be very welcome, because I do not have any clue anymore :)
try increasing number of watchers https://stackoverflow.com/a/33537743
this often was the cause for me
I have a similar issue, bs is not reloading anymore after the last webpack upgrade. With the following config were working well until these few days, when I updated my stack. Here it is:
new BrowserSyncPlugin({
browser: 'google chrome',
host: 'dev.test.it',
proxy: 'dev.test.it',
files: [{
match: [
'**/*.css',
'**/*.js',
'**/*.html',
'**/*.php',
],
fn: function(event, file) {
if (event === 'change') {
const bs = require('browser-sync').get('bs-webpack-plugin');
bs.reload();
}
},
}],
}),
Any idea?
@lucacattide
try increasing number of watchers https://stackoverflow.com/a/33537743
re-create issue if this does not help