webpack2 jquery compile hangs

Question

Webpack2 do not compiles anymore with included jQuery. Here is my Webpack config which use to work.

const rules = {
    componentStyles: {
        test:  /\.(scss|sass)$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
    },
    fonts: {
        test: /\.(ttf|eot|svg?)|(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: 'file-loader?name=fonts/[name].[ext]'
    },
    images: {
        test: /\.(png|jpe?g|gif)$/,
        use:[
            {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        ]
    },
    autoprefixer: {
        test: /\.docs\.css$/,
        use: [{
          loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
        }]
    },
    jquery: {
        test: require.resolve('jquery'),
        use: [
            {
                loader: 'expose-loader',
                query: 'jQuery'
            },
            {
                loader: 'expose-loader',
                query: '$'
            }
        ]
    }
}

now on compile the process hangs on

 26% building modules 139/155 modules 16 active ...jquery/external/sizzle/dist/sizzle.js

Answer 1

So here's what I am using to load with jQuery and Webpack 2

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './app/bootstrap.js', //entry file
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
  resolve: {
    modules: [
      'node_modules',
    ],
  },
  devtool: 'cheap-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, './src'),
    port: 8700,
    inline: true,
    hot: true,
    watchContentBase: true,
    open: true,
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      disable: false,
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(mod, count) {
        // Don't include things under '/src' folder
        return mod.resource &&
          mod.resource
          .indexOf(path.resolve(__dirname, 'src')) === -1;
      },
    }),
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
  module: {
    rules: [{
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          loader: [{
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                modules: true
              }
            }
          ],
        }),
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          query: {
            limit: 2000,
            name: '[name].[ext]',
          },
        }, ],
      },
      {
        test: /\.(ico|woff|eot|woff2|ttf)$/,
        use: [{
          loader: 'url-loader',
          query: {
            limit: 1,
            name: '[name].[ext]',
          },
        }, ],
      },
    ],
  },
};

You can see the loaders included. Let me know whether it works.