webpack file-loader options aren't recognized

Question

Being new to webpack, the answer might be staring me down but I don't see it. No matter how I try to pass them along, the file-loader options aren't found.

I'm using file-loader and I'm trying to pass a publicPath (or simply anything, at first) along as an option. I went into the file loader source code and added a log for all the options it detected, but they always come up empty.

webpack.config.prod.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'idlink-1.1.1.js',
    publicPath: ''
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'})
  ],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-1'] }
      },
      {test: /\.css$/, loader: "style-loader!css-loader" },
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
      {
        test: /\.(jpe?g|png|gif|svg|pdf)$/i,
        loader: "file",
        options: { publicPath: 'https://apps.ixordocs.be/'}
      },
      {test: /\.gif$/, loader: "url-loader?mimetype=image/png" }
    ]
  },
}

I've also tried with loader: "file-loader"

as well as added the options as one string like this

loader: "file?name=[name].[ext]&publicPath=https://apps.ixordocs.be/"

Some context info: I don't want to have a hardcoded publicPath defined in my output: {}, i want to grab it dynamically from a parameter placed on the div that my plugin is loaded into.

I've tried using the __webpack_public_path__ variable and it works, but not for images. The public path is grabbed from the parameter, set, and used to fetch a chunk. Somehow it has no effect on images though. If I hardcode a publicPath under output, it DOES work for images. This leads me to believe there is a problem with the loader's communication to the variable, so the idea is to get the options working and eventually try to pass a dynamic publicPath in there.

For one I don't see any example or documentation that suggests you can put an url into publicPath, it is always a local file system path. This does not seem to be the tool to solve your requirements. — Gimby, Jan 04 '17 at 15:25
Thanks for the input. I was afraid of this as well, so i did also try it with a local path. Unfortunately it's not only path-related options that aren't found. Simply no options are being passed through. — TDeSmet, Jan 04 '17 at 15:46
Perhaps a silly question but... did you actually install the file-loader module? — Gimby, Jan 04 '17 at 15:50

jal · Answer 1 · 2017-01-07T22:38:24.137

Your question is totally valid based on the documentation of the loader on both loader's GitHub repo and webpack docs. The problem is the publicPath and outputPath features are implemented in a pull request that is merged but not yet released to a new version of loader, and the README on npm doesn't mention the features for the same reason.
You can still use these features by installing from the GitHub repo with npm install webpack/file-loader --save-dev and your options should work. If not try replacing options with query.

{
    test: /\.(jpe?g|png|gif|svg|pdf)$/i,
    loader: "file-loader",
    query: { publicPath: 'https://apps.ixordocs.be/'}
}

Using URLs for publicPath is also valid because it happens often that you want to load your assets from a CDN or another server.

webpack file-loader options aren't recognized

1 Answers1