all image assets start with './/' at the key of the manifest file

[SaraiDuek]

I've been using a version of your suggested webpack.config.js file you used in your flask-webpack video but for some reason this is the manifest file i'm getting ('.//' at each key and it won't add the images folder from the path, but the values are as expected):

{"assets":{
   ".//japan-tickets.png":"images/japan-tickets.db7c68e1892ff11bf2dff9256a8a3cd9.png",
   ".//japan-tickets-large.png":"images/japan-tickets-large.97a1e7f33489d30ee39b23e981d37b5e.png",
   ".//cc/mastercard.png":"images/cc/mastercard.373e4f1ac72b50605183e8216edde845.png",
   ".//favicon.png":"images/favicon.7a490944f315e24d179e27f3962f3545.png",
   ".//cherryblossom.jpg":"images/cherryblossom.116db0d040ecec60aae1b5051d4a48ca.jpg",
   ".//Wisteria-tunnel-japan-shutterstock.jpg":"images/Wisteria-tunnel-japan-shutterstock.41b33e7718dba673ba7c0d372ec1619f.jpg",
   ".//cc/jcb.png":"images/cc/jcb.58f43e5f1fb8c6a4e7e76a17e7824e29.png",
   ".//spinner.gif":"images/spinner.3930838bac528f00cb908784164c0a9f.gif",
   ".//cc/diners-club.png":"images/cc/diners-club.03afaaa2d75264e332dc28309b7410b9.png",
   ".//jt.png":"images/jt.747ad1791eec4550135c59788f60a245.png",
   ".//cc/visa.png":"images/cc/visa.26bcf191ee12e711aa540ba8d0c901b7.png",
   ".//cc/american-express.png":"images/cc/american-express.8a5ade08365dcc7e5fa39a946bb76ab8.png",
  ".//cc/discover.png":"images/cc/discover.f89468f36ba1a9080b3bb05b9587d470.png",
"app_js.js":"app_js.d8c4209cd30405e63bd3.js"},
"publicPath":"http://localhost:2992/assets/"}

And this is my config file:

var fs = require('fs');
var path = require('path');

// Webpack and third party plugins.
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var HotModuleReplacementPlugin = require('manifest-revision-webpack-plugin');
var historyApiFallback = require('connect-history-api-fallback');

// Environment detection.
var node_env = process.env.NODE_ENV || 'development';

/*
 Configuration settings
 ------------------------------------------------------------------------------
 */

// Where is your project located relative to this config?
var context = path.join(__dirname, '..');

// Where are your source assets located?
var rootAssetPath = 'japantickets/static';
var contextRoot = path.join(context, rootAssetPath);

// Where will the files get built to?
var buildOutputPath = path.join(__dirname, '../build/public');

// How should certain asset types be configured?
var assets = {
    bootstrap:{
      path: 'bootstrap',
      filename: '[name].[hash].css'
    },
    fonts: {
        path: 'fonts',
        filename: '[path][name].[hash].[ext]'
    },
    images: {
        path: 'images',
        filename: '[path][name].[hash].[ext]'
    },
    scripts: {
        path: 'scripts',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].js'
    },
    styles: {
        path: 'styles',
        filename: '[name].[hash].css'
    }
};

// Which top level JS and CSS files should get output?
var chunks = {
    app_js: [
        path.join(contextRoot, assets.scripts.path, 'app_js.js')
    ]
};

// Where will assets get served in development mode? This depends on running
// the webpack dev server.
var publicPath = process.env.PUBLIC_PATH || 'http://localhost:2992/assets/';

/*
 Do not edit past this line unless you are tinkering with webpack.
 ------------------------------------------------------------------------------
 */

// Plugins that will load in all environments.
var plugins = [
    // http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/webpack/extract-text-webpack-plugin
    new ExtractTextPlugin(assets.styles.filename),

    // https://github.com/nickjj/manifest-revision-webpack-plugin
    new ManifestRevisionPlugin(path.join(__dirname, '../build/manifest.json'), {
        rootAssetPath: path.join(rootAssetPath, assets.images.path),
        ignorePaths: ['/styles', '/scripts', '/fonts', '/bootstrap']
    }),

    // https://webpack.js.org/plugins/hot-module-replacement-plugin/
    new webpack.HotModuleReplacementPlugin()
];

// Development environment only plugins.
if (node_env !== 'development') {
    var developmentPlugins = [
        // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
        new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}),

        // http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
        new webpack.optimize.DedupePlugin(),

        // https://webpack.js.org/plugins/hot-module-replacement-plugin/
        new webpack.HotModuleReplacementPlugin()
    ];

    plugins.push(developmentPlugins[0])
}

module.exports = {
    context: path.join(__dirname, '../'),
    entry: chunks,
    output: {
        path: buildOutputPath,
        publicPath: publicPath,
        filename: assets.scripts.filename,
        chunkFilename: assets.scripts.chunkFilename
    },
    resolve: {
        // Allow requiring files without supplying the extension.
        extensions: ['*', '.js', '.css']
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: path.join(__dirname, '../build/public'),
      historyApiFallback: true,
      watchOptions: { aggregateTimeout: 300, poll: 1000 },
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    },
    module: {
        loaders: [
            {   test: [/\.DS_Store$/,
                       /\.zip$/], 
                loader: 'ignore-loader' 
            },
            {
                test: /\.js$/, loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
              test: /\.css$/,
              loader: 'css-loader'
            },
            {
              test: /\.*(sass|scss)$/,
              loaders: ['css-loader', 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
                loaders: [
                    'file-loader?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]',
                    'img-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {   test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=application/font-woff" 
            },
            {   test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file-loader" 
            }
        ]
    },
    plugins: plugins,
};

Then i'm trying to add an asset in the html with an asset key from the manifest:

<link rel="shortcut icon" type="image/x-icon" href="{{ asset_url_for('.//favicon.png') }}" />

This makes the asset_url_for tag from flask_webpack not work (script and style tags are working great) because of this if in the asset_url_for function (line 123 in flask_webpack/init.py):

if '//' in asset:
            return asset

I'm guessing there's some logic to that if (happy to know why), so i was trying to get the plugin to output the keys correctly but with no luck. any idea why i see this issue?

Thanks,
Sarai.

[nickjj]

Hi,

That // logic was added in to detect if the asset has http:// or https:// in its name, in which case the Flask-Webpack plugin would not attempt to look it up in the manifest, and instead it will just serve that asset as is.

I went for // because you can technically serve a third party asset using // as the protocol (to inherit from your site's http or https protocol).

That part of the issue would belong in the Flask-Webpack repo btw.

[SaraiDuek]

Oh ok, thanks for the explanation! (and the fast reply!)
Any idea why the manifest file generation is acting up? If the manifest keys will be generated as expected (similar to the value minus the hash) it will solve the problem with flask-webpack, that's why i thought the problem is here.

I would expect the assets to be like this:

"images/favicon.png":"images/favicon.7a490944f315e24d179e27f3962f3545.png"

rather than this:

".//favicon.png":"images/favicon.7a490944f315e24d179e27f3962f3545.png",

[nickjj]

Yeah, that other part of it adding .// is a bug here. What version of this plugin are you using, or even better, include your package.json here.

[SaraiDuek]

I'm using 0.4.1

package.json:

{
  "name": "website",
  "version": "1.0.0",
  "description": "JapanTickets website",
  "main": "./japantickets/static/scripts/app_js.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.6",
    "img-loader": "^2.0.0",
    "manifest-revision-webpack-plugin": "^0.4.1",
    "script-loader": "^0.7.2",
    "style-loader": "^0.20.1",
    "sync-exec": "^0.6.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^3.0.2",
    "ignore-loader": "^0.1.2",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config config/webpack.config.js --host 127.0.0.1 --port 2992 --hot --inline",
    "build": "Webpack --config config/webpack.config.js --progress --profile --color --display-error-details"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/JapanTickets/website.git"
  },
  "keywords": [
    "JapanTickets"
  ],
  "author": "Sarai Duek",
  "license": "ISC",
  "homepage": "https://gitlab.com/JapanTickets/website#README",
  "bugs": {
    "url": "https://gitlab.com/JapanTickets/website/issues"
  }
}

[SaraiDuek]

I was able to resolve my issue (not the bug itself though) by adding '/' to the rootAssetPath.

(I also gave the app's static folder instead of the static/images so it will include the images folder in the path, i guess this is also part of the bug, but adding the end '/' solved the issue in both cases)

Used to be something like 'path/to/assets', now 'path/to/assets/' and it got rid of one '/' in the manifest for some reason. Now a manifest entry looks like:

"./images/img.png":"images/img.db7c68e1892ff11bf2dff9256a8a3cd9.png",

still has the './' in the beginning, but at least now i can use the url_for tag with flask_webpack.

I hope this helps resolving this issue.

[paulozoom]

I have the same issue with ./ being at the beginning of image.