在Webpack中使用jquery-mobile

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每次需要（'jquery'）它將返回一個全局可用的變量jQuery。