Webpack 2 loading, exposing, and bundling jquery and bootstrap

只谈情不闲聊 提交于 2020-01-15 06:25:40

问题


This has been asked in piecemeal but no one seems to be able to settle on an answer. I'm very simply trying to bundle jquery THEN bootstrap and have $, JQuery and bootstrap be exposed globally.

Here's my webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: {
        accountdetails: './src/main/webapp/public/js/accountdetails.js',
        vendor_jquerybs: ['jquery', 'bootstrap']
    }
    ,
    module:{
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node-modules/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output: {
        path: __dirname + '/src/main/webapp/public/js/dist',
        publicPath: '/',
        filename: '[name].bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

This bundles properly. It loads as my first <script> in the <head> But I get console issues like: "$ is not defined", "jQuery is not defined".

How do I write this config to expose jQuery/$ and bootstrap globally? The Webpack docs say, CommonChunksPlugin, expose-loader, etc. What is the best way to do this? I'm very confused by the documentation.

Thank you.


回答1:


Found the answer here https://github.com/webpack-contrib/expose-loader

the module is expose-loader and is apparently needed to expose objects, classes, etc to window.

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

NOTE: Correct me if I'm wrong, but there is then no need to expose bootstrap globally. jQuery will suffice.

Full config now:

var webpack = require('webpack');

module.exports = {
    entry: {
        accountdetails: './src/main/webapp/public/js/accountdetails.js',
        vendor_jquerybs: ['jquery', 'bootstrap']
    }
    ,
    module:{
        loaders: [
            {
            test: /\.jsx?$/,
            exclude: /node-modules/,
            loader: 'babel-loader'
            },
            {
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
                },
                {
                loader: 'expose-loader',
                options: '$'
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output: {
        path: __dirname + '/src/main/webapp/public/js/dist',
        publicPath: '/',
        filename: '[name].bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

NOTE: You CANNOT remove 'jquery' from entry point.



来源:https://stackoverflow.com/questions/44569682/webpack-2-loading-exposing-and-bundling-jquery-and-bootstrap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!