WDS HtmlWebpackPlugin 不适用于目录返回

Question

如果我的目录结构是：

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

一切正常，但如果结构是：

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

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

第一个目录结构案例的稳健配置：

...

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);
}

最后一个案例的配置：

...

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);
}

正如您在最后一个例子中看到的那样，HtmlWebpackPlugin 文件名包含目录后面 (../${entry}.html,).

Answer 1

Webpack 不允许您从 output.path 文件夹返回。适用于您的用例的配置是 -

module.exports = {
  entry: {
      "public/index": './src/index/index',
      "public/contacts": './src/contacts/contacts',
      "public/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("public/[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);
}

我们在这里所做的是在条目名称本身中提供子路径信息。所以当 webpack 生成输出文件时，它会将它们放在这些子路径中。对于 html，我们不提供子路径，因此它们在根输出文件夹中生成。但这并非万无一失，例如，您可能会遇到 webpack-dev-server 或动态导入 (require.ensure) 的问题。有关详细信息，请参阅此 - https://github.com/webpack/webpack/issues/1189.

WDS HtmlWebpackPlugin 不适用于目录返回

WDS HtmlWebpackPlugin not work with directory back

webpack

webpack-dev-server

html-webpack-plugin