使用 jquery-mobile 和 Webpack

Question

我正在尝试使用 webpack 加载 jquery-mobile，但到目前为止没有成功。我知道 jquery-mobile 依赖于 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') 它都会 return 一个全局可用的变量 jQuery.

使用 jquery-mobile 和 Webpack

Using jquery-mobile with Webpack

javascript

jquery

jquery-ui

jquery-mobile

webpack