webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin
const webpack = require('webpack');                          // 导入webpack

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',             
    },                
    output: {
        filename: '[name].js',                
        path: path.resolve(__dirname, 'dist')    
    },
    devServer: {
        contentBase: './dist',   // 告诉dev-server在哪里查找文件
        port: '8080',            // 端口号
        hot: true,               // 模块热替换
        hotOnly: true            // 如果不能进行模块热替换，则不刷新网页
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
            template: './src/template.html'     // 模板
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()    // webpack内置的模块热替换插件
    ]
};

index.js:

import './div.css';         // 导入样式

let div = document.createElement('div');
div.innerText = 1;
document.body.appendChild(div);

// 创建一个button元素，点击它就增加div元素中的数值
let button = document.createElement('button');
button.innerText = "加1"
button.addEventListener('click', () => {
    div.innerText = parseInt(div.innerText) + 1;
});
document.body.appendChild(button);

div.css:

div {
    background: red;
}