webpack-jquery-loaders-pack v0.1.1

Installation

Use npm install webpack-jquery-loaders-pack instead of installing all dependencies and loaders separately.

Configuration

1. Set globals

Use the ProvidePlugin in the plugins object of webpack.config.js file to inject jquery implicit globals:

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery'",
      "window.$": "jquery"
]

2. Set plugins (optional)

Add the loaders to your webpack.config.js file to support jquery-ui (if you do not want to use jquery-ui, ommit this step)

module: {
  loaders: [
      {test: /\.css$/,loader: "style-loader!css-loader"},
      {test: /\.(jpe?g|png|gif)$/i,loader:"file-loader"}
  ]
}

3. Set aliases (optional)

Add aliases to resolve object of webpack.config.js file to support jquery-ui (if you do not want to use jquery-ui, ommit this step)

resolve: {
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js',
    'jquery-ui-css': 'jquery-ui-dist/jquery-ui.css'
  }
}

Usage

Load jquery and jquery-ui into your entry-point file:

require("jquery");
require("jquery-ui");   //ommit if you do not use jquery-ui
require("jquery-ui-css");   //ommit if you do not use jquery-ui

or set the entry property in the webpack.config.js file:

entry: [
    "jquery",
    "jquery-ui",
    "jquery-ui-css",
    "your-entry-point"
]

Whole webpack.config.js file should look like

module.exports = {
  entry: [
      "jquery",
      "jquery-ui",
      "jquery-ui-css",
      "your-entry-point"
  ],
  output:{...},
  module: {
    loaders: [
        {test: /\.css$/,loader: "style-loader!css-loader"},
        {test: /\.(jpe?g|png|gif)$/i,loader:"file-loader"}
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery'",
        "window.$": "jquery"
  ],
  resolve: {
    alias: {
      'jquery-ui': 'jquery-ui-dist/jquery-ui.js',
      'jquery-ui-css': 'jquery-ui-dist/jquery-ui.css'
    }
  }
}