导出的js模块怎么在html里用,Webpack:导出到窗口中的现有模块

我的目标是使用Webpack将隔离的组件导出到假定的全局对象中。

index.html

var MyApp = window.MyApp || {};

MyApp.something = MyApp.something || {};

//

// other modules/components loaded here...

//

MyApp.something.myIsolatedModule.run();

在上面的示例中,我假设有一个全局对象/模块,该对象/模块的属性something将附加其他模块。因此,我想将隔离的模块附加到全局MyApp.something对象,而又不破坏MyAppor

MyApp.something。

webpack.config.js

var webpack = require('webpack');

var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = {

target: 'web',

context: __dirname + '/src/',

entry: './main.jsx',

output: {

path: __dirname + '/dist/',

filename: 'app.bundle.js',

library: 'something',

libraryTarget: 'var'

},

resolve: {

extensions: ['', '.js', '.jsx']

},

module: {

loaders: [

{test: /\.jsx$/, loader: '../node_modules/jsx-loader'}

]

},

externals: {

react: {

root: 'React',

commonjs: 'react',

commonjs2: 'react',

amd: 'react'

}

},

plugins: [

new UglifyJsPlugin()

]

};

src / main.jsx

module.exports = {

myIsolatedModule: require('./MyIsolatedModule')

};

我尝试将Webpack的output.libraryTarget值设置为每个可能的值(请参阅http://webpack.github.io/docs/configuration.html#output-

librarytarget),并尝试使用的值output.library,使其包含直接名称空间随着我的模块。什么都没有我想要的…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值