我的目标是使用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,使其包含直接名称空间随着我的模块。什么都没有我想要的…