I’m working on angular 2, in which I would like to require jQuery from Jquery ui. Each module adds itself to jQuery by accessing the global variable. I have spent hours searching pretty much every corner of Github and Stackoverflow (and other random websites) looking for solutions, but so far, not a single one has worked.
Methods I have tried:
ProvidePlugin for $, jQuery, and window.jQuery, expose loader imports loader various other combinations of requiring jQuery at different locations in my stack I’m clearly missing something here. Every time I write import “jquery-ui” , I get “jQuery is not defined
Thanks.
webpack.common.config.ts
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
var commonConfig = {
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
// TypeScript
{ test: /\.ts$/, loaders: ['ts-loader'] },
{ test: /\.css$/, loaders: ['style','css'] },
{
test: /\.html/,
loader: 'html',
query: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
// Teach html-minifier about Angular 2 syntax
customAttrSurround: [
[/#/, /(?:)/],
[/\*/, /(?:)/],
[/\[?\(?/, /(?:)/]
],
customAttrAssign: [/\)?\]?=/]
}
},
{ test: /\.scss$/, loaders: ['to-string', 'css', 'postcss', 'resolve-url', 'sass?sourceMap'] },
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
},
'uglify-loader': {
mangle: false
},
postcss: function () {
return [autoprefixer];
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.DefinePlugin({
ENV: JSON.stringify(process.env.ENV)
})
],
devtool: process.env.ENV == 'dev'? 'source-map' : null
};
module.exports=commonConfig;
@IamKritika Add this to your webpack config