manifest-revision-webpack-plugin
manifest-revision-webpack-plugin copied to clipboard
Images missing in manifest with Webpack 4
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'),
}
}),
]),
};
I have been having the same issue all afternoon. Just upgraded to Webpack 4.
I fixed this by adding extensionsRegex to the options of ManifestRevisionPlugin
https://github.com/av-guy/flask-headlines/blob/master/webpack.config.js
Thanks for the heads up. I haven't upgraded to webpack 4 yet with this library.