WDS HtmlWebpackPlugin无法使用目录返回

Question

如果我的目录结构是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn" type="button" class="btn btn-default" style="margin-left: 10px;" onmouseover="fun()"><span class="fa fa-bars"></span>  Services</button>

<div class="modal-content1" id="aaa">
  <h1> ABCDH</h1>
</div>

一切都很好，但如果结构是：

/dist
--some.html
--some.css
--some.js
--another.html
--another.css
--another.js
/src
--...
webpack.config.babel.js

即使在手动重新加载页面后，html文件中的任何更改都不会反映出来。

我对第一个目录结构案例的强健配置：

/dist
--/public
----some.css
----some.js
----another.css
----another.js
--some.html
--another.html
/src
--...
webpack.config.babel.js

并配置最后一个案例：

...

module.exports = {
    entry: {
        index: './src/index/index',
        contacts: './src/contacts/contacts',
        about: './src/about/about',
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/",
        filename: "[name].js",
        library: "[name]"
    },

    resolve: {
        extensions: ['.js', '.css', '.scss'],
    },
    resolveLoader: { 
        modules: ['node_modules'],
        extensions: ['.js']
    },

    module: {
        rules: [
            { test: /\.html$/, loader: "html-loader" },
            { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/},
            { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },
    },
    plugins: [
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV),
        }),
        new ExtractTextPlugin("[name].css"),
    ]
};

if (NODE_ENV == 'development') {
    let htmlPlugins = [];
    for(let entry in module.exports.entry) {
        htmlPlugins.push(
            new HtmlWebpackPlugin({
                chunks: [`${entry}`],
                filename: `${entry}.html`,
                template: `${module.exports.entry[entry]}.html`,
            })
        );
    }
    module.exports.plugins = (module.exports.plugins || []).concat(htmlPlugins);
}

正如您在上一个案例中所见，HtmlWebpackPlugin文件名包含目录（... module.exports = { entry: { index: './src/index/index', contacts: './src/contacts/contacts', about: './src/about/about', }, output: { path: path.join(__dirname, "dist/public/"), publicPath: "/public/", filename: "[name].js", library: "[name]" }, resolve: { extensions: ['.js', '.css', '.scss'], }, resolveLoader: { modules: ['node_modules'], extensions: ['.js'] }, module: { rules: [ { test: /\.html$/, loader: "html-loader" }, { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}, { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, }, plugins: [ new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV), }), new ExtractTextPlugin("[name].css"), ] }; if (NODE_ENV == 'development') { let htmlPlugins = []; for(let entry in module.exports.entry) { htmlPlugins.push( new HtmlWebpackPlugin({ chunks: [`${entry}`], filename: `../${entry}.html`, template: `${module.exports.entry[entry]}.html`, }) ); } module.exports.plugins = (module.exports.plugins || []).concat(htmlPlugins); } ）。