Webpack - 来自 HTML 文件的脚本配置

Question

我正在使用 Webpack 进行用打字稿编写的项目，我想问一下是否有可能更改例如。 嵌入在bundle.js文件中的变量/对象？我的意思是这样的东西(没有 Webpack 是一种流行的方法(。

我的 HTML 文件：

<script src="bundle.js"></script>
<script>
MyScript.init({width: 500});
</scipt>

我的webpack.config.js：

var path = require('path');
module.exports = {
entry: './signature.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '')
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
loaders: [
{ test: /.tsx?$/, loader: 'ts-loader' }
]
}
}

Answer 1

编辑：

您可以通过添加libraryTarget: "umd"并使用module.exports = MyScript或export MyScript来使 webpack 自动导出MyScript。

module.exports = {
entry: './signature.ts',
output: {
filename: 'bundle.js',
// add this:
libraryTarget: 'umd',
path: path.resolve(__dirname, '')
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
loaders: [
{ test: /.tsx?$/, loader: 'ts-loader' }
]
}
}

并在您的脚本中

var MyScript = {
init: function (width) {
if (width === undefined) {
// set default width
width = 400
}
// your code here
}
}
module.exports = myScript

这样，您的用户可以自己决定如何调用您的模块。

更多信息：

• UMD(通用模块定义(
• 库目标

老：

是的，它是。不过，这与 webpack 并没有特别关系。你想要这个：

window.MyScript = {
init: function (width) {
if (width === undefined) {
// set default width
width = 400
}
// your code here
}
}

然后，您可以从 HTML 脚本标记中使用它。

<script src="bundle.js"></script>
<script>
MyScript.init({width: 500});
</scipt>

作为window-对象的属性，可以从任何位置访问代码。

但请记住，这违背了使用你需要 webpack 的 JavaScript 架构的目的。您希望防止污染全局范围，这是将模块捆绑器与umd/cjs/amd一起使用的原因之一。

有关window的更多信息：

• https://developer.mozilla.org/en/docs/Web/API/Window
• https://www.w3schools.com/jsref/obj_window.asp