Javascript 如何使用类似于jquery$.load（）的Webpack4加载页面内容

我在

webpack4

内容加载方面遇到了一个问题，我以前是如何处理

jquery

的

下面是我试图用

webpack4

假设我有一个页面

setting.html

<link rel="stylesheet" href="setting.css">
<div id="settingContent">
    <!-- content -->
</div>
<script src="setting.js"></script>

使用jquery时，我通常会这样做，如下所示

$('setting_tab').on('click',function(){
    $('#pageContent').load('setting.html');
});

下面是我的网页配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: ['babel-polyfill', './src/js/index.js'],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/bundle.js'
        },
        devServer: {
            contentBase: './dist'
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html'
            })
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        }
    };

---

webpack

不应该这样做

webpack

不应该这样做

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: ['babel-polyfill', './src/js/index.js'],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/bundle.js'
        },
        devServer: {
            contentBase: './dist'
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html'
            })
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        }
    };