我目前开始在我的网站上使用webpack，并且有一个问题。
我目前有一个html页面，其中包含我的javascript捆绑包，并且在嵌入html的按钮中具有一些Project Structure > Artifacts功能。我想保留这些按钮和onclick的功能，但是目前我还没有找到一种方法。显然，如果我尝试缩小javascript函数，该函数的名称将会更改，并且将无法正常工作。
这是一个示例，其中webpack生成的捆绑包包含在html文件中：
onclick和当前<button onclick="foo("bar")">test</button>未定义。
我尝试使用html webpack插件未成功。
https://jsfiddle.net/danwillm/bkgtnm6s/
有什么办法吗？
是的，您可以使用该功能，但仍然需要对代码进行一些修改-onClick。
Webpack
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = (env,argv) => {
return {
devtool: argv.mode === 'production' ? 'none' : 'source-map',mode: argv.mode === 'production' ? 'production' : 'development',entry: {
MYSCRIPT: './sources/script.js'
},output: {
path: path.resolve(__dirname,'./dist'),filename: './[name].js',library: '[name]',libraryTarget: 'var',},module: {
rules: [{
test: /\.js$/,exclude: /node_modules/,use: {
loader: 'babel-loader'
}
},]
},plugins: [
new CleanWebpackPlugin({
verbose: true
}),new HtmlWebPackPlugin({
filename: 'index.html',template: './sources/index.html'
})
]
}
}
最重要的部分是名称输入和输出。 您还必须导出每个函数。
JS
export function test(type) {
alert(type);
}
我们可以通过这种方式来使用该功能。
HTML
<a onClick="MYSCRIPT.test('bar')">click</a>
您可以找到整个设计示例here。