javascript - 如何从 webpack 的 raw-loader 中排除 html-webpack-plugin 模板

Question

我有一个非常大的项目，它使用两个 webpack 包来支持网站的旧版本和新版本。一个配置使用原始加载器来处理 html 文件。它看起来像这样：

this.configModern = {
  entry: 'modern',
  output: {
    filename: 'bundled-[name].[chunkhash].js',
    path: path.join(__dirname, '/Scripts/bundled/')
  },
  module: {
    rules: [
        {
            test: /\.html$/,
            use: [
                'raw-loader'
            ]
        },
    ]
  },
  plugins: [
    new CommonsChunkPlugin({
      name: 'vendor-modern',
      minChunks: function (module) {
        return module.context
          && module.context.includes('node_modules');
      }
    }),
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery'
    }),
    new HtmlWebpackPlugin({
      filename: 'bundle_modern_dev.html',
      template: './Views/Shared/WebpackTemplates/devTemplate.html',
      inject: false,
    }),
  ],
};

这是我的devTemplate.html

<% for (var js in htmlWebpackPlugin.files.js) { %>
<script src="/Scripts/bundled/<%= htmlWebpackPlugin.files.js[js] %>"></script>
<% } %>

我的问题是 raw-loader 导致 webpack 将我的 devTemplate.html 的内容复制到输出文件中。

如何排除模板文件，以便它使用 html-webpack-plugin 的默认 ejs 加载器，而不使用 raw-loader。

编辑：

webpack 是 2.3.1 版本

html-webpack-plugin 是 3.2.0 版

标签： javascripthtmlwebpackhtml-webpack-plugin

Answer 1

这就是我们如何在 Webpack 中排除文件或文件夹

module: {
    rules: [
        {
            test: /\.html$/,
            exclude:/WebpackTemplates/,   /* Add this line */
            use: [
                'raw-loader'
            ]
        },
    ]
  },

我将包含模板 (WebpackTemplates) 的文件夹添加到raw-loader 的排除选项中

这意味着它将忽略该文件夹中的所有文件。

您可以使用正则表达式添加多个文件夹/文件夹以排除选项。