Webpack ProvidePlugin和全局变量

时间:2017-08-22 18:55:25

标签: webpack momentjs

我对webpack非常陌生,我注意到的第一件事就是我可以将jquery包装在下面,所以它可以全局地提供给我的javascript,这很可爱。我想用其他我喜欢的框架,会计和我需要使用的任何插件来做这个,例如jQuery UI。

天真并且没有正确阅读webpack,我只是尝试了下面的内容,但它似乎不起作用:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/js/config.js',
    output: {
        path: path.resolve(__dirname, 'public/js'),
        filename: 'main.build.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            accounting: 'accounting',
            moment: 'moment'
            // jQuery: './src/vendor/jquery/dist/jquery.min',
            // jqueryui : './src/vendor/jquery-ui/jquery-ui.min',
            // listjs: './src/vendor/list.js/dist/list.min',
            // moment: './src/vendor/moment/min/moment.min',
            // nouislider: './src/vendor/nouislider/distribute/nouislider.min',
            // accounting: './src/js/plugins/accounting',
            // imagesLoaded: './src/vendor/imagesloaded/imagesloaded.pkgd.min',
            // parsley: './src/vendor/parsleyjs/dist/parsley.min',
            // urlQuery: './src/vendor/domurl/url.min'
        }),
        new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/)
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                query: {
                    presets: [ "babel-preset-es2015" ].map(require.resolve)
                }
            }
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

这是我的傲慢,但真的希望有人可以提供帮助,因为在全球范围内提供这些东西并且不必将其导入某些文件会非常好,我正在尝试将整个前端js堆栈转换为es6模块。

提前致谢!

1 个答案:

答案 0 :(得分:2)

经过一番摆弄后,确实工作得很好。一旦通过npm安装了片刻,这很棒。