Open Daweo93 opened 6 years ago
Hey @Daweo93 If indeed html files are emitted while saving sass, something off. could you share more details? your configs, workflow, what you're building etc.
Hey @malinushj , I'm want to build webpack starter for building static pages which will compile pug, sass and load assets.
Here is my webpack congif file:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const generateHtmlPlugins = new HTMLWebpackPlugin({
filename: `templates/index.html`,
template: path.resolve(__dirname, `../src/html/index.pug`),
publicPath: '/'
});
const config = {
srcFolderName: 'src',
outputFolderName: 'dist'
};
const extractCss = new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: true,
disable: process.env.NODE_ENV === 'development'
});
const browserSync = new BrowserSyncPlugin(
{
host: 'localhost',
port: 3000,
server: {
baseDir: ['dist/']
},
startPath: 'templates'
},
{
injectCss: true
}
);
const cleanDist = new CleanWebpackPlugin(
[
`${config.outputFolderName}/css`,
`${config.outputFolderName}/js`,
`${config.outputFolderName}/img`,
`${config.outputFolderName}/fonts`,
`${config.outputFolderName}/templates`
],
{
root: path.resolve(__dirname, '../')
}
);
module.exports = {
entry: {
main: `./${config.srcFolderName}/js/index.js`
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, `../${config.outputFolderName}`),
publicPath: '../'
},
mode: 'development',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: extractCss.extract({
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
],
fallback: 'style-loader'
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../img',
outputPath: '/img'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/fonts',
publicPath: '../fonts'
}
}
]
},
{
test: /\.pug$/,
use: [
{
loader: 'pug-loader',
options: {
pretty: true
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}
]
},
plugins: [extractCss, cleanDist, browserSync, generateHtmlPlugins]
};
Here are my dependencies from package.json
"browser-sync": "^2.23.7",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"pug": "^2.0.3",
"pug-html-loader": "^1.1.5",
"pug-loader": "^2.4.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.2"
},
With configuration above every time browser sync refresh the page after editing sass files.
may be resolved by the linked PR. for it to merge, there must be an extensive testing performed. if you want to volunteer – please, go ahead and read my comment in PR and this thread – https://github.com/Va1/browser-sync-webpack-plugin/issues/78
cheers
Hello, I have issue with injectingCss using browser-sync with generateHtmlPlugins. I've read other issues and I suppose that full page is refreshed because every time when I save sass file HTML files are emmited.
Is there any know workaround for that?
Thanks