首页 > Webpack打包UMD的问题

Webpack打包UMD的问题

webpack把es6写的library打包成一个UMD文件,使用global var的方式来调用这个打出来的bundle(ukulele.js)会出现一个很奇怪的问题:
比如我<script src="ukulele.js"></script>后
我必须使用Ukulele.Ukulele才能真正调用到function,外面会被包裹一层叫Ukulele属性。。。我们明明export的是一个function啊。。。请知道的朋友们解答,如何才能直接可以new Ukulele()呢 而不是 new Ukulele.Ukulele()

entry 如下 (es6)

function Ukulele(){
    //balabala
}
export {Ukulele}

webpack-config.js如下

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

var config = {
    entry: __dirname + '/src/ukulele/core/Ukulele.js',
    devtool: 'source-map',
    output: {
        path: __dirname + '/dist',
        filename: 'ukulele.js',
        library: libraryName,
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /(node_modules|bower_components|test)/,
                query: {
                    presets: ['es2015']
                }
             },
        ]
    },
    resolve: {
        root: path.resolve('./src'),
        extensions: ['', '.js']
    }
}
module.exports = config;

自己搞定了,不要设置libraryName就行了

output: {
        path: __dirname + '/dist',
        filename: 'ukulele.js',
        library: libraryName,   //不要设置libraryName就行了
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
【热门文章】
【热门文章】