Question

我刚刚开始将我的脚趾浸入webpack的世界。我使用了很棒的Vue.js和vueify，因此我的模块是ES6。

我遇到的一个难点是加载一些第三方jQuery插件。我使用ProvidePlugin加载jQuery - 工作正常。

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

然后我有一个名为plugins的目录，其中包含misc 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'
}

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

Answer 2

new webpack.ProvidePlugin({
  'React': path.resolve(__dirname, "node_modules/react/react"),
  'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"),
  "jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"),
  "$": path.resolve(__dirname, "node_modules/jquery/dist/jquery")
})

解析你的lib路径

Webpack - 在webpack.config.json中使用Script Loader

2 个答案: