正在导入Bootstrap JavaScript、Webpack

Question

我试图从Bootstrap JS组件中只导入collapse组件，如下所示：

import "../../../node_modules/bootstrap/js/dist/collapse";

除了jQuery之外，一切都很好，这个文件(collapse.js(需要jQuery，它被编译到我的main.js文件中，如何避免这种情况？我已经包含了来自CDN的jQuery。

这是我的Gulp/Webpack配置

let webpackConfig = {
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
};
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

更新，解决方案：

let webpackConfig = {
externals: { jquery: 'jQuery' },
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
};

Answer 1

您可以使用Webpack中的externals设置来阻止它将某些包包含到您的捆绑包中。