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

问题描述：

这已经被零碎地提出，但似乎没有人能够找到答案。
我只是想简单地尝试捆绑jquery然后使用 $ ， JQuery 和 bootstrap 全局公开。

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.

这是我的webpack.config.js

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

此捆绑正确。它作为我的第一个< script> 加载到< head>
但是我得到了控制台问题喜欢：$未定义，jQuery未定义。

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".

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

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.

谢谢。

答

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

模块 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: '$'
          }]
      }]
}

注意：如果我错了，请纠正我，但是不需要全局公开bootstrap。 jQuery就足够了。

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

现在完全配置：

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'。

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

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

相关推荐