nickjj / manifest-revision-webpack-plugin

Write out a manifest file containing your versioned webpack chunks and assets.
ISC License
124 stars 40 forks source link

Images missing in manifest with Webpack 4 #49

Open ghost opened 5 years ago

ghost commented 5 years ago

Hello,

I recently upgraded to Webpack 4. Since then the manifest is missing all image assets. The images seem to be emitted by the loaders though, as I can in the console and the output directory. Is there some special configuration needed or is this a bug?

My webpack.config.js looks like this:

const path = require('path'); const webpack = require('webpack');


/*
 * Webpack Plugins
 */
const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// take debug mode from the environment
const debug = (process.env.NODE_ENV !== 'production');

// Development asset host (webpack dev server)
const publicHost = debug ? 'http://localhost:2992' : '';

const rootAssetPath = path.join(__dirname, 'assets');

module.exports = {
    // configuration
    context: __dirname,
    entry: {
        main_js: './assets/js/main',
        main_css: [
            path.join(__dirname, 'node_modules', 'font-awesome', 'css', 'font-awesome.css'),
            //path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'css', 'bootstrap.css'),
            path.join(__dirname, 'assets', 'css', 'bootstrap.scss'),
            path.join(__dirname, 'node_modules', 'bootstrap-navbar-sidebar', 'dist', 'navbar-fixed-left.css'),
            path.join(__dirname, 'node_modules', 'bootstrap-navbar-sidebar', 'dist', 'navbar-fixed-right.css'),
            path.join(__dirname, 'assets', 'css', 'style.css'),

        ],
    },
    output: {
        path: path.join(__dirname, 'newsfeed', 'static', 'build'),
        publicPath: `${publicHost}/static/build/`,
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css'],
    },
    devtool: 'source-map',
    devServer: {
        headers: {'Access-Control-Allow-Origin': '*'},
    },
    module: {
        rules: [
            {test: /\.html$/, loader: 'raw-loader'},
            {
                test: /\.(scss|sass|css)$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            context: rootAssetPath
                        },
                    },
                ],
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {presets: ['env'], cacheDirectory: true}
            },
        ],
    },
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    plugins: [
        new MiniCssExtractPlugin(),
        new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery'}),
        new ManifestRevisionPlugin(path.join(__dirname, 'newsfeed', 'webpack', 'manifest.json'), {
            rootAssetPath,
            ignorePaths: ['/js', '/css'],
        }),
    ].concat(debug ? [] : [
        // production webpack plugins go here
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
            }
        }),
    ]),
};
av-guy commented 5 years ago

I have been having the same issue all afternoon. Just upgraded to Webpack 4.

av-guy commented 5 years ago

I fixed this by adding extensionsRegex to the options of ManifestRevisionPlugin

https://github.com/av-guy/flask-headlines/blob/master/webpack.config.js

nickjj commented 5 years ago

Thanks for the heads up. I haven't upgraded to webpack 4 yet with this library.