开发者社区> 问答> 正文

Webpack打包UMD的问题

webpack把es6写的library打包成一个UMD文件,使用global var的方式来调用这个打出来的bundle(ukulele.js)会出现一个很奇怪的问题:
比如我后
我必须使用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;

展开
收起
a123456678 2016-03-12 10:40:43 6377 0
1 条回答
写回答
取消 提交回答
  • output: {
            path: __dirname + '/dist',
            filename: 'ukulele.js',
            library: libraryName,   //不要设置libraryName就行了
            libraryTarget: 'umd',
            umdNamedDefine: true
        },
    2019-07-17 19:00:21
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
基于webpack和npm的前端组件化实践 立即下载
Rebuilding Web Tracking Infras 立即下载
从Web到Cloud App 立即下载