shellscape / webpack-manifest-plugin

webpack plugin for generating asset manifests
MIT License
1.44k stars 185 forks source link

Running manifest causes emits otherwise unmodified files #168

Closed farmerau closed 5 years ago

farmerau commented 5 years ago

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'],
},