Обрабатывать Dom используя Webpack - PullRequest
Новая
       10

Обрабатывать Dom используя Webpack

0 голосов
/ 14 мая 2018

Как мне манипулировать DOM, используя Webpack и чистый Javascript?

У меня следующая ошибка: 

Uncaught ReferenceError: register is not defined
    at HTMLButtonElement.onclick

В моем index.js есть только: 

function register() {
    alert('Hello')
}

Мой тестовый сценарий: 

<div class="form-group">
    <label for="matri">Matri</label>
    <input class="form-control col-12" type="text" placeholder="Enter your matri" id="matry">
</div>

<div class="text-left mt-5" style="width: 100%;">
   <button class="btn btn-primary" onclick="register()" type="button">Register</button>
</div>

Я хотел бы работать, используя область действия, аналогичную принципу MVC.Где у меня есть модель и мой контроль для управления DOM.Есть ли такая возможность или есть лучшая альтернатива?

Моя организационная структура ниже изображения:

My structure

мой Webpack.файл config.js 

const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                options: {
                    presets: ['env']
                }
            },
            {
                test: /\.(scss|css)$/,

                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',

                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',

                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new UglifyJSPlugin(),
        new MiniCssExtractPlugin({ filename: 'app.min.css', path: path.resolve(__dirname, 'dist') })
    ],

    entry: './src/index.js',

    output: {
        filename: './dist/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    mode: 'production'
};
...