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

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

这捆绑正确。 它作为我在 中的第一个加载但是我得到的控制台问题如下：“$未定义”，“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”。