Trying to load jQuery into my Webpack configuration using Middleman.
I am trying to use:
- Middleman 4.2.1
- Bootstrap 4 Beta li>
- jQuery 3
I am loading Bootstrap CSS loading, but now I have problems trying to load jQuery along with Bootstrap JS components.
Not sure what I'm doing right with ProviderPlugin
I saved all the dependencies using the --save-dev option.
// webpack.config.js const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ './source/assets/javascripts/all.js' ], module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, ] }, output: { path: __dirname + './tmp/dist', filename: 'assets/javascripts/[name].bundle.js' }, plugins: [ new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }), new ExtractTextPlugin('assets/stylesheets/[name].bundle.css'), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", Alert: "exports-loader?Dropdown!bootstrap/js/dist/alert", Carousel: "exports-loader?Dropdown!bootstrap/js/dist/carousel", Collapse: "exports-loader?Dropdown!bootstrap/js/dist/collapse", Modal: "exports-loader?Dropdown!bootstrap/js/dist/modal", Popover: "exports-loader?Dropdown!bootstrap/js/dist/popover", Scrollspy: "exports-loader?Dropdown!bootstrap/js/dist/scrollspy", Tab: "exports-loader?Dropdown!bootstrap/js/dist/tab", Tooltip: "exports-loader?Dropdown!bootstrap/js/dist/tooltip", }), ] };
My index.js:
// This is where it all goes :) console.log("Hello world");
Console console log output in browser.
My site.css.scss file is currently loading Bootstrap styles:
@import "custom"; @import "../../../node_modules/bootstrap/scss/bootstrap.scss"; @import "index";
Do I need to require or import jQuery elsewhere, and not just into the webpack configuration?
Any feedback is greatly appreciated.
Thanks:)