Desired Behaviour
Include jQuery UI in webpack build.
Actual Behaviour
Error when running webpack:
ERROR in ./src/js/jquery-ui.js
Module not found: Error: Can't resolve
'jquery' in 'C:\Me\Documents\my_repo\src\js'
What I've Tried
I tried adding this to webpack.config.js but it didn't change anything:
plugins: [
new UglifyJsPlugin(),
new webpack.ProvidePlugin({
$: "./jquery-3.3.1",
jQuery: "./jquery-3.3.1",
jquery: "./jquery-3.3.1"
})
]
I also tried adding this to webpack.config.js (so that the path is relative to location of webpack.config.js) and that caused additional errors Module not found: Error: Can't resolve '/src/js/jquery-3.3.1':
plugins: [
new UglifyJsPlugin(),
new webpack.ProvidePlugin({
$: "/src/js/jquery-3.3.1",
jQuery: "/src/js/jquery-3.3.1",
jquery: "/src/js/jquery-3.3.1"
})
],
Steps To Replicate
1) Go to jQuery UI download builder
2) Select the following only and download the file:
-- Version 1.12.1
-- Effects > "Effects Core"
-- Effects > "Slide Effect"
-- Theme > "No Theme"
In the unzipped folder, get the jquery-ui.js file.
Note: I only need slide effect, not all of jQuery UI, hence the custom download.
my_entry_file.js
import './jquery-ui';
webpack.config.js
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
var webpack = require("webpack");
module.exports = {
entry: "./src/js/my_entry_file.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist/js")
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
{
test: /\.jpg$/,
use: [
{ loader: "url-loader" }
]
},
{
test: path.resolve(__dirname, 'src/js/jquery-3.3.1'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
new UglifyJsPlugin(),
new webpack.ProvidePlugin({
$: "./jquery-3.3.1",
jQuery: "./jquery-3.3.1"
})
],
resolve: {
alias: {
'uikit-util': path.resolve(__dirname, 'node_modules/uikit/src/js/util')
}
}
}
jquery-3.1.1exists where the webpack config file is?"window.jQuery": "jquery'","window.$": "jquery"or possibly look at using: npmjs.com/package/webpack-jquery-uijquery-3.1.1exists insrc/jswhich is wheremy_entry_file.jsexists. Using the config file shown in original post, jQuery works fine. I am just trying to add jQuery UI as well. Thanks.ProvidePluginis not being able to resolve jquery. Try adding the path from webpack config (where it is) to where jquery is. Are you getting what i'm saying?