在Webpack中使用jquery-mobile

问题描述：

我正在尝试使用webpack加载jquery-mobile，到目前为止还没有运气. 我知道jquery-mobile取决于jquery-ui，而后者又取决于jquery.

I am trying to load jquery-mobile using webpack with no luck so far. I am aware that jquery-mobile depends on jquery-ui which in turn depends on jquery.

如何在Webpack中设置这种方案?

How do I set up such a scenario in 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'
        }
    }
};

任何帮助将不胜感激.

谢谢大家.

答

如果仅按正确的顺序将所需的脚本添加到页面中，则无需担心webpack中的问题.

If you just add the scripts you need to the page in the correct order, you don't need to worry about that in webpack.

您所要做的就是告诉webpack这些模块是从外部引用加载的，就像这样:

All you have to do is tell webpack that those modules are loaded from external references, like so:

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

这告诉webpack，每当您需要('jquery')时，它将返回一个全局可用的变量jQuery.

This tells webpack that every time you require('jquery') it will return a globally available variable jQuery.

在Webpack中使用jquery-mobile

相关推荐