I didn't see a template for posting here, and I also am not sure if this is the appropriate space. This is a pretty specific issue/question and I apologize if it belongs elsewhere. Please delete this if it is the case.
I'm developing for WordPress, and am using multiple entry points to compile my sass and JavaScript. Because you're supposed to enqueue your scripts using wp_enqueue_script, I am reading the manfiest file and using the file specified using the manifest (basic stuff). However, while I'm running webpack --watch, I'm also using BrowserSync to proxy to my valet install so that I can reload changes to my php and twig files. This part works well.
However, I've configured browser-sync-webpack-plugin with injectCss: true which injects the CSS instead of reloading the entire page. This works well, as long as I don't have the manifest plugin included. Through further investigation, I realized that when I'm using this plugin, it emits my main.js file in addition to the css files generated.
This isn't because I'm including the scss files in my javascript, because I'm using a scss only entry point and also using webpack-fix-style-only-entries to prevent a js file from being emitted for a css only (minus webpack bootstrapping) file. Additionally, manipulating the same files with the manifest plugin doesn't result in javascript output which lets the browsersync injectCSS option work fine.
I don't fully understand how webpack plugins work, but is there a way to prevent the plugin from emitting files that weren't compiled as a part of the process or to run once (or some other configurable number of times)?
Potentially important parts from my webpack config: (I've excluded those I anticipate are unnecessary, so please let me know if I've missed something)
plugins: [
new FixStyleOnlyEntriesPlugin({silent: true}),
/**
* Define how we name our css files and where we put them.
*/
new MiniCssExtractPlugin({
filename: hashedName('css/[name]', 'css'),
}),
new ManifestPlugin({fileName: 'rev-manifest.json'}),
/**
* Browsersync functionality.
*/
new BrowserSyncPlugin({},
{
//Prevents a reload from happening when css is updated. Instead, inject it.
injectCss:true,
//reload: false,
}),
],
entry: {
//main.js + main.css
main: paths.appIndexJs,
style: [paths.appSrc + '/scss/main.scss'],
//vendor.css fixed by FixStyleOnlyEntriesPlugin to only produce a css file for this entry.
vendor: [paths.appSrc + '/scss/vendor/bootstrap.scss'],
},
I didn't see a template for posting here, and I also am not sure if this is the appropriate space. This is a pretty specific issue/question and I apologize if it belongs elsewhere. Please delete this if it is the case.
I'm developing for WordPress, and am using multiple entry points to compile my sass and JavaScript. Because you're supposed to enqueue your scripts using
wp_enqueue_script
, I am reading the manfiest file and using the file specified using the manifest (basic stuff). However, while I'm running webpack --watch, I'm also using BrowserSync to proxy to my valet install so that I can reload changes to my php and twig files. This part works well.However, I've configured browser-sync-webpack-plugin with
injectCss: true
which injects the CSS instead of reloading the entire page. This works well, as long as I don't have the manifest plugin included. Through further investigation, I realized that when I'm using this plugin, it emits my main.js file in addition to the css files generated.This isn't because I'm including the scss files in my javascript, because I'm using a scss only entry point and also using webpack-fix-style-only-entries to prevent a js file from being emitted for a css only (minus webpack bootstrapping) file. Additionally, manipulating the same files with the manifest plugin doesn't result in javascript output which lets the browsersync injectCSS option work fine.
I don't fully understand how webpack plugins work, but is there a way to prevent the plugin from emitting files that weren't compiled as a part of the process or to run once (or some other configurable number of times)?
Potentially important parts from my webpack config: (I've excluded those I anticipate are unnecessary, so please let me know if I've missed something)