BowerWebpackPlugin preventing exposed vars from getting to the window

[ericdfields]

It seems that simply the presence of this plugin in my webpack config prevents exposed variables from getting to the browser. In my setup below, I should have window.$ and window.jQuery available to the browser. I'm not sure if I'm misunderstanding something w/ either this plugin or webpack, or if I've encountered a bug.

Here is my config where everything works as expected and the browser gets its two vars:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  context: __dirname + '/frontend', // the project dir
  entry: {
    _application: __dirname + "/frontend/javascripts/_application.coffee"
  },
  output: {
    filename: '[name].bundle.js',
    // We want to save the bundle in the same directory as the other JS.
    path: __dirname + '/app/assets/javascripts/webpack',
    sourceMapFilename: 'webpack/[file].map'
  },
  resolve: {
    root: [path.join(__dirname, "javascripts"),
           path.join(__dirname, "stylesheets")],
    extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
      { test: /\.coffee$/, loader: "coffee-loader" },
      { test: require.resolve("jquery"), loader: "expose?jQuery" },
      { test: require.resolve("jquery"), loader: "expose?$" }
    ]
  }
};

And here's my output. Notice the module count:

Hash: 3a2446f63dff7fbe0421
Version: webpack 1.7.3
Time: 1824ms
                 Asset     Size  Chunks             Chunk Names
_application.bundle.js  1.47 MB       0  [emitted]  _application
    + 175 hidden modules

Now when I include this plugin the way I think I want to:

var path = require("path");
var webpack = require("webpack");
var BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
  context: __dirname + '/frontend', // the project dir
  entry: {
    _application: __dirname + "/frontend/javascripts/_application.coffee"
  },
  output: {
    filename: '[name].bundle.js',
    // We want to save the bundle in the same directory as the other JS.
    path: __dirname + '/app/assets/javascripts/webpack',
    sourceMapFilename: 'webpack/[file].map'
  },
  resolve: {
    root: [path.join(__dirname, "javascripts"),
           path.join(__dirname, "stylesheets")],
    extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
  },
  plugins: [
    new BowerWebpackPlugin({
      excludes: /.*\.less/
    }),
    new webpack.ProvidePlugin({
      $:      "jquery",
      jQuery: "jquery"
    })
  ],
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
      { test: /\.coffee$/, loader: "coffee-loader" },
      { test: require.resolve("jquery"), loader: "expose?jQuery" },
      { test: require.resolve("jquery"), loader: "expose?$" }
    ]
  }
};

My output is the following. Notice two less modules than before:

Note: The code generator has deoptimised the styling of "/Users/EricFields/Development/vanda/frontend/bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
Hash: 088000ddc3b4debaf043
Version: webpack 1.7.3
Time: 4625ms
                 Asset     Size  Chunks             Chunk Names
_application.bundle.js  1.36 MB       0  [emitted]  _application
   [2] jquery (bower component) 45 bytes {0} [built]
    + 173 hidden modules

In this scenario, window.$ and window.jQuery are no longer available.

I'd love some help or insight. Happy to provide more details. Thank you.

[gtournie]

I have the same problem...

[gtournie]

As import $ from 'expose?$!expose?jQuery!jquery'; doesn't work anymore, I added these lines:

window.$ = $;
window.jQuery = $;

Waiting for a patch.