HTML встроенный JavaScript с веб-пакетом - PullRequest
Новая
       7

HTML встроенный JavaScript с веб-пакетом

1 голос
/ 09 ноября 2019

В настоящее время я начинаю использовать веб-пакет для своего веб-сайта, и у меня возник вопрос.

В настоящее время у меня есть html-страница, которая включает в себя мой комплект javascript и содержит некоторые функции onclick в кнопках, встроенных в html. Я хотел бы сохранить функциональность этих кнопок и onclick, но в настоящее время я не нашел способа сделать это. Очевидно, что если я попытаюсь минимизировать функции javascript, имя функции изменится, и она не будет работать.

Вот пример, где пакет, созданный webpack, включен в html-файл:

<button onclick="foo("bar")">test</button> и в настоящее время foo не определено.

Я попытался использовать плагин html webpack безуспешно.

https://jsfiddle.net/danwillm/bkgtnm6s/

Есть ли способсделать это?

Ответы [ 2 ]

1 голос
/ 10 ноября 2019

Да, вы можете перейти к функции, но вам все равно придется немного изменить код - 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>

Вы можете найти полный пример разработки здесь .

0 голосов
/ 10 ноября 2019

Ваш скрипт работает в SO фрагменте, как вы можете видеть ниже 

function foo(test){
console.log(test);
}
<a onClick="foo('bar');" class="blue left desktop-only pointer">click here</a>

Он не работал в jsfiddle, вероятно, из-за проблем с областью действия: сценарий, вероятно, выполняется в своей собственной области, и определение функции там не было достигнуто onclick в HTML. Я изменил определение вашей функции, чтобы оно всегда попадало в глобальную область видимости 

foo=function(test){console.log(test);}

, и теперь оно также работает там, см. Здесь: https://jsfiddle.net/obuvjn0m/

...