问题
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.
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'
}
};
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".
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.
Thank you.
回答1:
Found the answer here https://github.com/webpack-contrib/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: '$'
}]
}]
}
NOTE: Correct me if I'm wrong, but there is then no need to expose bootstrap globally. jQuery will suffice.
Full config now:
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'
}
};
NOTE: You CANNOT remove 'jquery' from entry point.
来源:https://stackoverflow.com/questions/44569682/webpack-2-loading-exposing-and-bundling-jquery-and-bootstrap