web-dev-qa-db-ja.com

Webpackファイルローダー出力[オブジェクトモジュール]

HtmlWebpackPlugin、_html-loader_、_file-loader_でwebpackを使用しています。フレームワークを使用せず、TypeScriptのみを使用する単純なプロジェクト構造があります。したがって、私は直接HTMLコードを_index.html_に書き込みます。このHTMLファイルをHtmlWebpackPluginのテンプレートとしても使用しています。

すべてのウェブサイトと同じように、PNGを参照する画像をアセットフォルダーに配置する必要があります。 _file-loader_は、ファイルをロードして、新しいファイル名をsrcタグ内に正しく配置する必要がありますが、実際にはそうではありません。代わりに、srcタグの値として、_[object Module]_を使用します。 _file-loader_がいくつかのオブジェクトを発行し、.toString()メソッドが実行されると、このように表されます。ただし、_file-loader_がファイルを正常に処理し、新しい名前で出力パスに出力したことがわかります。エラーは発生しません。これが私のwebpack設定と_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>
_

プロジェクトの構造：

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

編集私の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

使用しているファイルローダーの正確なバージョンを教えていただけますか？これは数時間前に起こったのでわかっています。^ 5.0.2バージョンがあります。

0
Philip Alexander Hassialis

ファイルローダーを^ 5.0.2分前に更新しました。

_esModule: false_が修正案として提案されていましたが、それでもうまくいきませんでした。

私の修正は奇妙な<img src={require('assets/logo.png').default}/>でした。初めて_.default_を使用しましたが、うまくいきました。

0
kerubim