程序员经验分享-hwhale

Webpack 2 加载、公开和捆绑 jquery 和 bootstrap

2024-01-05

这个问题已经被零星地问过，但似乎没有人能够给出答案。 我只是想捆绑 jquery THEN bootstrap 并有$, JQuery and bootstrap被全球曝光。

这是我的 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'
    }
};

这样可以正确捆绑。它作为我的第一个加载<script> in the <head>但我遇到控制台问题，例如：“$ 未定义”、“jQuery 未定义”。

如何编写此配置以在全局范围内公开 jQuery/$ 和 bootstrap？ Webpack 文档说，CommonChunksPlugin, expose-loader等等。执行此操作的最佳方法是什么？我对文档感到非常困惑。

谢谢。


在这里找到了答案https://github.com/webpack-contrib/expose-loader https://github.com/webpack-contrib/expose-loader

该模块是expose-loader显然需要将对象、类等暴露给窗口。

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

注意：如果我错了，请纠正我，但是没有必要在全局范围内公开引导程序。 jQuery 就足够了。

现在完整配置：

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'
    }
};

注意：您不能从入口点删除“jquery”。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

twitterbootstrap

WEBPACK

webpack2

Webpack 2 加载、公开和捆绑 jquery 和 bootstrap 的相关文章