[javascript] 웹팩 파일 로더 출력 [객체 모듈]

Program / 글쓴이

내가 가진 웹팩을 사용하고 HtmlWebpackPlugin, html-loader하고 file-loader. 프레임 워크를 사용하지 않고 typescript 만 사용하는 간단한 프로젝트 구조가 있습니다. 따라서 HTML 코드를에 직접 작성합니다 index.html. 또한이 HTML 파일을의 템플릿으로 사용 HtmlWebpackPlugin합니다.

모든 웹 사이트와 마찬가지로 자산 폴더에 PNG를 나타내는 이미지를 넣어야합니다. file-loader파일을 올바르게로드해야 새 파일 이름을 src태그 안에 넣지 만 실제로는 그렇지 않습니다. 대신 src태그 의 값으로 가 있습니다 [object Module]. 나는 file-loader일부 객체를 방출 한다고 가정 하고 .toString()메소드가 실행될 때 이와 같이 표현됩니다 . 그러나 file-loader파일을 성공적으로 처리했으며 출력 경로에 새 이름으로 생성 된 것을 볼 수 있습니다 . 오류가 없습니다. 여기 내 웹팩 구성과 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"

답변

파일 로더 문서 당 :

기본적으로 파일 로더는 ES 모듈 구문을 사용하는 JS 모듈을 생성합니다. 모듈 연결 및 트리 흔들림과 같이 ES 모듈을 사용하는 것이 유리한 경우가 있습니다.

webpack 은 플랫 모듈 자체 대신 require()다음과 같은 객체에 대한 ES 모듈 호출을 해결 하는 것으로 보입니다 {default: module}. 이 동작은 다소 논란의 여지가 있으며이 문제 에서 설명 합니다.

따라서 src속성을 올바르게 확인 default하려면 내 보낸 모듈 의 속성에 액세스 할 수 있어야 합니다. 프레임 워크를 사용하는 경우 다음과 같은 작업을 수행 할 수 있어야합니다.

<img src="require('assets/logo.png').default"/>

또는 파일 로더의 CommonJS 모듈 구문을 사용할 수 있습니다.이 구문은 웹팩이 모듈 자체로 직접 해석됩니다. esModule:false웹팩 설정 에서 설정 하십시오.

webpack.config.js :

 {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },

답변

@의 stellr42의 수정 방법 esModule: false당신의 file-loader구성은 현재 시점에서 가장 좋은 해결 방법이다.

그러나 이것은 실제로 html-loader여기에서 추적되는 버그입니다 : https://github.com/webpack-contrib/html-loader/issues/203

그것은 ES 모듈 지원이 추가되었습니다처럼 보이는 file-loader, css-loader그리고 다른 친구하지만 html-loader놓친했다.

이 버그가 수정되면, 제거하는 것이 더있을 것입니다 esModule: false간단하게 업그레이드 html-loaderES 모듈은 약간의 혜택을 제공대로합니다 (에 언급 된 문서 )

또는 (나와 같이) HTML이 아닌 CSS에서 이미지 를 로드하는 데 문제가있어서이 문제가 발견 되면 수정은 업그레이드 css-loader이므로 ES 모듈을 비활성화 할 필요가 없습니다.

답변

이것은 파일 로더 버전 5.0.2에서 발생하며 이전 버전은 default속성 을 호출하지 않고 정상적으로 작동합니다.

답변

파일 로더를 ^ 5.0.2 분 전에 업데이트했습니다.

나는 esModule: false제안 된 해결책이지만 그것이 효과가 없다는 것을 알고 있습니다.

내 수정은 <img src={require('assets/logo.png').default}/>이상했다. 처음 사용 .default했지만 작동했습니다.

답변