将 jquery-mobile 与 Webpack 一起使用

Question

我正在尝试使用 webpack 加载 jquery-mobile，但到目前为止没有运气。 我知道 jquery-mobile 依赖于 jquery-ui，而 jquery-ui 又依赖于 jquery。

如何在 Webpack 中设置这样的场景？

这是我的webpack.config.js：

var webpack = require('webpack');
var path = require('path');
var bower_dir = __dirname + '/bower_components';

module.exports = {

    context: __dirname,
    entry: './assets/js/index.js',         
    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    module: {
        loaders: [
            {test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports?this=>window"}
        ]
    },
    resolve: {
        alias: {
            'jquery': bower_dir + '/jquery/src/jquery.js',
            'jquery-ui': bower_dir + '/jquery-ui/jquery-ui.js',
            'jquery-mobile': bower_dir + '/jquery-mobile/js/jquery.mobile.js'
        }
    }
};

任何帮助将不胜感激。

提前谢谢大家。

Answer 1

如果你只是按照正确的顺序将你需要的脚本添加到页面中，你就不用担心在 webpack 中了。

您所要做的就是告诉 webpack 这些模块是从外部引用加载的，如下所示：

{
  externals: {
    'jquery': 'jQuery'
  } 
}

这告诉 webpack 每次你 require('jquery') 时它都会返回一个全局可用的变量 jQuery。