Files property not working

[itmayziii]

Dependencies

• webpack - ^3.10.0
• html-webpack-plugin - ^3.0.6
• html-webpack-include-assets-plugin - ^1.0.4

Use case

I am converting an older project from Gulp to Webpack so that we can utilize modules in any new code that we write. The problem I am faced with is that we can not completely remove Gulp yet as some of our code can not be ran in strict mode and modules enforce strict mode. My solution was to have webpack run gulp as a pre build step using the webpack-shell-plugin and then this plugin takes the output of gulp and injects it in my html. This method worked when I only have one output file, but when I have multiple output files it does not appear to work.

here is my config

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');

const cleanDirectoryPlugin = new CleanWebpackPlugin(
    [
        path.resolve(__dirname, 'assets/styles/dist'),
        path.resolve(__dirname, 'assets/js/dist')
    ]
);

const extractSassPlugin = new ExtractTextPlugin({
    filename: "styles/dist/[name].[contenthash].css"
});

const uglifyJsPlugin = new UglifyJSPlugin({});

const webpackShellPlugin = new WebpackShellPlugin({
    onBuildStart: ['./node_modules/.bin/gulp scripts'] // Hack to prevent us from running gulp manually
});

const htmlWebpackIncludeAssetsPlugin = new HtmlWebpackIncludeAssetsPlugin({
    assets: [{path: 'js/dist', glob: 'production*.min.js', globPath: 'assets/js/dist'}],
    append: false,
    files: [path.resolve(__dirname, 'views/layouts/master.blade.php')]
});

const htmlPluginMain = new HtmlWebpackPlugin({
    filename: path.resolve(__dirname, 'views/layouts/master.blade.php'),
    template: path.resolve(__dirname, 'views/webpack-templates/layouts/master.blade.php'),
    chunks: ['main']
});

const htmlPluginBlog = new HtmlWebpackPlugin({
    filename: path.resolve(__dirname, 'views/layouts/partials/blog/master.blade.php'),
    template: path.resolve(__dirname, 'views/webpack-templates/layouts/partials/blog/master.blade.php'),
    chunks: ['blog']
});

module.exports = {
    context: path.resolve(__dirname, 'assets'),
    entry: {
        main: ['./js/src/index.js', './styles/src/scss/main.scss'],
        blog: ['./js/src/index.js', './styles/src/blog/blog.scss']
    },
    output: {
        publicPath: '/theme/assets',
        filename: 'js/dist/[name].[hash].js',
        path: path.resolve(__dirname, 'assets')
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSassPlugin.extract({
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                minimize: true
                            }
                        },
                        {
                            loader: "sass-loader"
                        }
                    ],
                })
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['env']
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        cleanDirectoryPlugin,
        extractSassPlugin,
        htmlPluginMain,
        htmlPluginBlog,
        uglifyJsPlugin,
        webpackShellPlugin,
        htmlWebpackIncludeAssetsPlugin
    ]
};

As you can see the files property for this plugin is only suppose to be applied to views/layouts/master.blade.php but instead it gets applied to nothing and I don't see any of the gulped files in my html. If I remove the files property then it shows up in all of my outputs.

Any help would be much appreciated! Please let me know if I can provide any more details.

[jharris4]

Did you see the examples in the unit tests? https://github.com/jharris4/html-webpack-include-assets-plugin/blob/master/spec/index.spec.js#L581

You should use a glob for files and not the full path like in your example...

[itmayziii]

I did actually try using a glob as well like

const htmlWebpackIncludeAssetsPlugin = new HtmlWebpackIncludeAssetsPlugin({
    assets: [{path: 'js/dist', glob: 'production*.min.js', globPath: 'assets/js/dist'}],
    append: false,
    files: ['views/layouts/*.blade.php']
});

[jharris4]

Maybe try '*views/layouts/*.blade.php' or '*views/layouts/master.blade.php' ?

Or, if you can make the filenames unique between blog and main HtmlWebpackPlugin you could probably use just '*.main-blade.php' or even '*main-blade.php'

[itmayziii]

I just tried those suggestions, nothing seems to be working for me. Even when I remove blog entry point and the htmlPluginBlog from the plugins section it does not work.

It seems anytime I specify the files property at all, the plugin simply does not add anything to my output. I would be interested in helping resolve this issue if your open for community pull requests?

[jharris4]

Are you sure that gulp has generated the assets at {path: 'js/dist', glob: 'production*.min.js', globPath: 'assets/js/dist'} when the plugin runs?

If there were no errors, it must be because it didn't find any assets.

Looking a the [https://github.com/1337programming/webpack-shell-plugin#api](webpack-shell-plugin API) maybe you need to try something like this to make sure gulp is done before this plugin runs:

plugins.push(new WebpackShellPlugin({
  onBuildStart: ['./node_modules/.bin/gulp scripts'],
  safe: true
}));

[jharris4]

@itmayziii did you ever get this working?

I'm thinking of closing this issue for inactivity...

[itmayziii]

@jharris4

I never did get this working, ended up settling for 2 webpack config files so that I could have 2 outputs.

[jharris4]

closing for inactivity...