1

我有一个基本的 webpack 配置：

module.exports = {
  context: __dirname,
  entry: './example.js',
  experiments: {
    asset: true,
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.png$/, type: 'asset/resource' },
      { test: /\.html$/, use: ['raw-loader'] },
      // { test: /\.html$/, type: 'asset/source' },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
};

此配置bundle.js在index.html使用html-webpack-plugin. 但是，我需要一个 html 加载器，并且我使用了原始加载器。一切正常。

然后，我想使用功能资产模块。查看webpack 5 资产模块文档，似乎asset/source是一样的raw-loader，因此我用这种类型更改加载器（请参阅上面 webpack 配置中的注释代码）并且 index.html 的输出不是我以前的. 事实上，它似乎是由 webpack 解释的，而不是像以前那样只是原始的。

var _ = non_webpack_require ("C:\Users...\node_modules\lodash\lodash.js");module.exports = function (templateParams) { with(templateParams) {return (function(data) { var __t, __p = ''; __p += '<!doctype html>Webpack App'; return __p })();}}

查看文档html-webpack-plugin，如果有 html 加载器，它会使用它。这意味着它asset/source不像raw-loader.

4

0 回答 0