Blowing chunks with webpack 2 chunks and jquery

General Prog (Archived)
1

so I’m loading jquery gloably via.

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  ...
 })

I have a main entry of app.js and have no issue with using jquery in the context of that file.

module.exports = {
  entry: {
    app: './js/app.js',
    vendor: './js/vendor.js',
    invite: './js/invite.js'
  },

As you can see I also have two other entries for vendor and a random invite.js

I use CommonsChunkPlugin to chunk out Vendor and Invite like so.

new webpack.optimize.CommonsChunkPlugin({
  names: ['vendor', 'invite', 'manifest'],
    filename: '[name].js'
}),

As stated before I can use jquery in my app.js and it will not attempt to require jquery into the app.js, but if I try to use jquery in the invite.js for example I see that webpack has loaded jquery into that document and the request looks to blow cause a cascade error even into app.js regardless of loading invite.js into the dom. :frowning:

If I look into the compiled invite.js file I see.

/***/ 0:
/***/ (function(module, exports, __webpack_require__) {

var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 * jQuery JavaScript Library v3.2.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *

Any ideas what to do?

Heres the full config.

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: './js/app.js',
    vendor: './js/vendor.js',
    invite: './js/invite.js'
  },

  output: {
    path: path.join(__dirname, "../priv/static/js"),
    filename: '[name].js'
  },

  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [{
            loader: "css-loader" // translates CSS into CommonJS
          }]
        })
      }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [{
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "sass-loader" // compiles Sass to CSS
          }]
        })
      }, {
        test: /\.js$/,
        exclude: [/node_modules/, /unison.min.js$/, /raphael-min.js$/, /horizontal-timeline.js$/],
        loader: 'babel-loader',
        query: {
          presets: ['env']
        }
      }, {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',
            publicPath: '../fonts/'
          }
        }]
      },
    ]
  },

  resolve: {
    alias: {
      'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
    },
  },

  plugins: [
    new CopyWebpackPlugin([{
      from: './static/',
      to: "../"
    }]),
    new ExtractTextPlugin('../css/[name].css'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Tether: 'tether',
      'window.Tether': 'tether',
      Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
      Button: 'exports-loader?Button!bootstrap/js/dist/button',
      Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
      Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
      Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
      Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
      Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
      Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
      Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: 'exports-loader?Util!bootstrap/js/dist/util'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'invite', 'manifest'],
      filename: '[name].js'
    }),

    new CleanWebpackPlugin(["../priv/static"])
  ]
}