How to include jquery using bower & webpack?

Question

JavaScript

In webpack I include all my files through

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'app/index.pug'),
    inject: 'body'
}),

But I also connected bower. Now I pass the jquery file directly to pug:

meta(charset="utf8")
meta(name="viewport", content="width=device-width, initial-scale=1")
script(src="jquery/dist/jquery.min.js")

The webpack html-loader is like this:

{
        test: /\.(pug|jade)$/,
        exclude: /(node_modules|bower_components)/,
        use:  [
          'html-loader',
          {
          loader: 'pug-html-loader',
          options: {
            data: {}
          }}
        ]
      },

the folders are like this:
app
--templates
----head.pug (I include JQUERY here)
--index.pug
bower_components
node_modules
webpack.config.js
package.json
bower.json

I get: Uncaught ReferenceError: $ is not defined

What needs to be done still to make it work? Thanks in advance

Answer 1

You need to add the following:

resolve: {
    alias: {
        jquery:"/your/path/to/jquery"
    }

}

 plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
        })
    ]