javascript - 使用 Webpack 处理 Dom
问题描述
如何使用 Webpack 和纯 Javascript 操作 DOM?
我遇到以下错误:
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。有这样的可能性还是有更好的选择?
我的组织结构如下图:
我的 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'
};
解决方案
推荐阅读
- node.js - Sequelize 是否有办法查找或选择字段子集?
- java - 将数据传回创建类的最安全方法?
- docker - usermod:docker 内的节点映像中不存在用户“ubuntu”
- javascript - 如何在文本输入和 h4 元素之间切换
- python - Roguelike 开发障碍!libtcod.map_compute_fov 贬值了吗?
- mysql - 用于选择多列中不同值的 Sql 查询
- python - windows 7、python 3.7 (anaconda)、mayavi、vtk:无法导入 mlab
- ios - 如何防止 SharkORM 中的重复条目
- flutter - 如何显示下一页视图的一部分?
- php - 功能仅适用于第一个按钮。拉拉维尔 7