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

Question

有人零星地提出这个问题，但似乎没有人能够确定答案。我非常简单地尝试捆绑 jquery THEN bootstrap 并让 $、JQuery 和 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'
    }
};

这捆绑得很好。它加载为我在 <head> 中的第一个 <script> 但是我遇到控制台问题，例如：“$ is not defined”，"jQuery is not defined".

如何编写此配置以全局公开 jQuery/$ 和 bootstrap？ Webpack 文档说 CommonChunksPlugin、expose-loader 等。最好的方法是什么？我对文档感到很困惑。

谢谢。

Answer 1

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

该模块是 expose-loader，显然需要将对象类等公开给 window。

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

注意：如果我错了，请纠正我，但没有必要在全球范围内公开 bootstrap。 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'。

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

Webpack 2 loading, exposing, and bundling jquery and bootstrap

javascript

jquery

twitter-bootstrap

webpack

webpack-2