web-dev-qa-db-fra.com

Sorties du chargeur de fichiers Webpack [Module objet]

J'utilise webpack avec HtmlWebpackPlugin, html-loader Et file-loader. J'ai une structure de projet simple dans laquelle je n'utilise aucun framework, mais uniquement TypeScript. Ainsi, j'écris mon code HTML directement dans index.html. J'utilise également ce fichier HTML comme modèle dans HtmlWebpackPlugin.

Comme tous les sites Web, j'ai besoin de mettre une image qui fait référence à un PNG dans mon dossier d'actifs. file-loader Devrait charger le fichier correctement, placez le nouveau nom de fichier dans la balise src mais ce n'est pas ce qui se passe. Au lieu de cela, comme valeur de la balise src, j'ai [object Module]. Je suppose que le file-loader Émet un objet et il est représenté comme ceci lorsque sa méthode .toString() est exécutée. Cependant, je peux voir que file-loader A traité le fichier avec succès et émis avec un nouveau nom dans le chemin de sortie. Je ne reçois aucune erreur. Voici ma configuration webpack et index.html.

const projectRoot = path.resolve(__dirname, '..');

{
  entry: path.resolve(projectRoot, 'src', 'app.ts'),
  mode: 'production',
  output: {
    path: path.resolve(projectRoot, 'dist'),
    filename: 'app.bundle.js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: 'html-loader'
      },
      {
        test: /\.(eot|ttf|woff|woff2|svg|png)$/i,
        use: 'file-loader'
      },
      {
        test: /\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false
            }
          }
        ]
      },
      {
        exclude: /node_modules/,
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(projectRoot, 'src', 'index.html')
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css',
      ignoreOrder: false
    })
  ]
};

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
  <body class="dark">
    <header>
      <nav class="navigation">
        <div class="left">
          <img src="assets/logo.png" class="logo"> <!-- This logo is output as [object Module] -->
        </div>
        <div class="right">

        </div>
      </nav>
    </header>
  </body>
</html>

Structure du projet:

config/
    webpack.config.js
dist/
src/
    styles/
    assets/
        logo.png
    index.html
    app.ts

Edit Mes dépendances package.json:

"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"ts-loader": "^6.2.1",
"TypeScript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
javascripthtmlwebpack
37
Bora

Pouvez-vous préciser la version exacte du chargeur de fichiers que vous utilisez? Je le sais parce que cela m'est arrivé il y a quelques heures, et j'ai la version ^ 5.0.2.

0
Philip Alexander Hassialis

Je viens de mettre à jour mon chargeur de fichiers en ^ 5.0.2 minutes.

Je sais que esModule: false Était le correctif suggéré mais cela n'a pas fonctionné pour moi.

Mon correctif était <img src={require('assets/logo.png').default}/> ce qui était bizarre. Première utilisation de .default Mais cela a fonctionné.

0
kerubim