Webpack中vendor.js和application.js之间的关系

如何解决Webpack中vendor.js和application.js之间的关系

我只是从Webpack / ES6开始，尝试理解vendor.js和application.js文件之间的关系。根据我在网上阅读的内容，vendor.js是导入外部库（例如jQuery，Bootstrap等）和application.js文件以用于应用程序特定代码的好地方。

使用上述方法，我将Bootstrap和bootstrap-select导入到我的vendor.js文件中，如下所示：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap-select/dist/css/bootstrap-select.css';
import 'bootstrap-select/dist/js/bootstrap-select.js';

当时我的理解是，我可以在application.js文件中使用bootstrap-select，如下所示：

$(function () {
    $('.my-select').selectpicker();
})

但是，一旦我运行Webpack并打开一个加载两个包的HTML文件（如下所示），我就会在控制台中看到此错误：Uncaught TypeError: e(...).selectpicker is not a function。

<script src="'core/static/dist/vendor.bundle.js"></script>
<script src="core/static/dist/application.bundle.js"></script>
...
<select class="my-select">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>

我需要将某些内容导入application.js吗？引导选择代码在vendor.js中工作正常，但是我不确定如何在其他捆绑软件中使用它。

作为参考，我的webpack.config.js是：

const webpack = require("webpack");

module.exports = {
    "mode": "development","entry": {
        "vendor": "./core/static/js/vendor.js","application": "./core/static/js/application.js"
    },"output": {
        "filename": "[name].bundle.js","path": __dirname + "/core/static/dist"
    },"module": {
        "rules": [
            {
                "test": /\.css$/i,"use": ['style-loader','css-loader'],}
        ]
    },"plugins": [
        new webpack.ProvidePlugin({
            $: 'jquery',jQuery: 'jquery'
        })
    ]
};