Question

这已经被零碎地提出，但似乎没有人能够找到答案。我只是想简单地尝试捆绑jquery，然后将$，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'
    }
};

这捆绑正确。它作为<script>中的第一个<head>加载但我得到的控制台问题如下：“$未定义”，“jQuery未定义”。

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

谢谢。

Answer 1

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

注意：如果我错了，请纠正我，但是不需要全局公开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

1 个答案: