javascript - Webpack - 在 webpack.config.json 中使用脚本加载器

Question

我才刚刚开始涉足 webpack 的世界。我在 vueify 中使用了很棒的 Vue.js，因此我的模块是 ES6。

我遇到的一个困难是加载一些第 3 方 jQuery 插件。我正在使用 ProvidePlugin 加载 jQuery - 效果很好。

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

然后我有一个名为 plugins 的目录，其中包含杂项 jQuery 插件。我的理解是脚本加载器只是将它们作为字符串加载到捆绑文件中，并在捆绑加载时对它们进行评估。然后可以像在常规脚本标记中加载这些脚本一样使用这些脚本(即不需要导入)。

但我就是无法使用任何插件。下面是我的加载程序数组。我做错了什么(或没有做)？

loaders: [

        // process *.vue files using vue-loader
        {
            test: /\.vue$/,
            loader: 'vue'
        },
        // process *.js files using babel-loader
        // the exclude pattern is important so that we don't
        // apply babel transform to all the dependencies!
        {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
        },
        {
            test: /plugins\.js$/,
            loader: 'script-loader' #tried script too
        }

    ]

Answer 1

我可以理解让 jQuery 插件与 webpack 一起工作的困难。虽然我没有针对此特定配置的解决方案，但我发现使用 cdn 来保持开发的顺利进行非常有用，直到可以完成进一步的故障排除。下面是一个例子。

在您的 .html 模板文件中:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

在 index.js 或任何你的主要入口点是:

import $ from 'jquery'

在你的 webpack 配置中:

externals: {
    jquery: 'jQuery'
}

由于这种方法涉及直接使用脚本标签，它可能更可靠地工作，同时暂时牺牲优化和捆绑的机会。