javascript - Webpack中vendor.js和application.js的关系

Question

我刚刚开始使用 Webpack/ES6 并尝试了解 avendor.js和application.js文件之间的关系。根据我在网上阅读的内容，avendor.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吗？bootstrap-select 代码在 中运行良好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'
        })
    ]
};

标签： javascriptwebpackecmascript-6