Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images missing in manifest with Webpack 4 #49

Open
ghost opened this issue Mar 28, 2019 · 3 comments
Open

Images missing in manifest with Webpack 4 #49

ghost opened this issue Mar 28, 2019 · 3 comments

Comments

@ghost
Copy link

ghost commented Mar 28, 2019

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
Copy link

av-guy commented Apr 7, 2019

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

@av-guy
Copy link

av-guy commented Apr 7, 2019

I fixed this by adding extensionsRegex to the options of ManifestRevisionPlugin

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

@nickjj
Copy link
Owner

nickjj commented Apr 7, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants