HTML 使用 webpack 内联 javascript

Question

我目前正在开始为我的网站使用 webpack，但我有一个问题。

我目前有一个 html 页面，其中包含我的 javascript 包，并且在 html 中嵌入的按钮中有一些 onclick 功能。我想保留这些按钮和 onclick 的功能，但目前我还没有找到这样做的方法。显然，如果我尝试缩小 javascript 函数，函数的名称会改变并且无法工作。

这是一个示例，其中由 webpack 生成的包包含在 html 文件中：

<button onclick="foo("bar")">test</button> 目前 foo 未定义。

我尝试使用 html webpack 插件但没有成功。

有什么办法吗？

Answer 1

是的，您可以使用该功能，但您仍然需要稍微修改代码 - 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。

HTML 使用 webpack 内联 javascript

HTML inline javascript with webpack

html

javascript

webpack

webpack-4