how to require jquery with webpack

Question

How to require jquery file with webpack should I have to install from npm, or can I just require the file download from jquery website?

directory

app/
./assets/javascripts/article/create/base.js
./assets/javascripts/lib/jquery-1.11.1.min.js
webpack.config.js

base.js error

require('../../../lib/jquery-1.11.1.min.js'); 
var Content = function() {
};
module.exports = Content;

webpack.config.js

module.exports = {
  entry: {
    'ArticleCreate':['./assets/javascripts/Article/Create/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  }
};

score 5 · Accepted Answer · edited May 23 '17 at 11:52

5

Have you tried:

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

There is a related answer which shows all options of importing jQuery here: Managing jQuery plugin dependency in webpack

edited May 23 '17 at 11:52

Community

1
1

answered Aug 10 '15 at 05:10

Meligy

35,654
11
85
109

yes I tried this `resolve: { alias: { jquery: "./assets/javascripts/lib/jquery-1.11.1.min.js" } },` and use `var $ = require('jquery');` but if shows error – user1775888 Aug 11 '15 at 02:10
I also tried `resolve: { root: path.resolve('./assets/javascripts/lib'), extensions: ['', '.js'] },` and `var $ = require('jquery-1.11.1.min.js');` it works but I just don't get why can't I use resolve alias ? – user1775888 Aug 11 '15 at 02:11
1

I found why, https://github.com/webpack/webpack/issues/109 seems have to use absolute path. – user1775888 Aug 11 '15 at 02:24

score 1 · Answer 2 · answered Aug 10 '15 at 04:54

1

I have had success with installing jQuery with npm

npm install jquery --save

Then

var $ = require('jquery'), jQuery = $, ...

answered Aug 10 '15 at 04:54

gihrig

51
1
10

how to require jquery with webpack

2 Answers2