Webpack은 HTML 파일의 이미지를 대체하지 않습니다.

Question

각도 2 앱과 함께 Webpack을 사용하고 있습니다. 내 Webpack 구성 파일의 로더는 다음과 같습니다. 긴 샘플 코드를 피하기 위해 플러그인과 가져 오기를 제거했습니다. Webpack은 css 파일의 이미지를 해시 이름으로 바꾸지 만 html 파일로 바꾸지는 않습니다. 내가 무엇을 놓치고 있는지 잘 모르겠다. 어떤 조언을 부탁드립니다.

module.exports = function (options) { 
    const DATAS = { 
     VERSION: JSON.stringify(require("../package.json").version), 
     DEBUG_INFO_ENABLED: options.env === 'dev' 
    }; 
    return { 
     entry: { 
      'polyfills': './src/main/webapp/app/polyfills', 
      'global': './src/main/webapp/content/css/global.css', 
      'main': './src/main/webapp/app/app.main' 
     }, 
     resolve: { 
      extensions: ['.ts', '.js'], 
      modules: ['node_modules'] 
     }, 
     module: { 
      rules: [ 
       { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' }, 
       { 
        test: /\.ts$/, 
        loaders: [ 
         'angular2-template-loader', 
         'awesome-typescript-loader' 
        ], 
        exclude: ['node_modules/generator-jhipster'] 
       }, 
       { 
        test: /\.html$/, 
        loader: 'raw-loader', 
        exclude: ['./src/main/webapp/index.html'] 
       }, 
       { 
        test: /\.css$/, 
        loaders: ['to-string-loader', 'css-loader'], 
        exclude: /(vendor\.css|global\.css)/ 
       }, 
       { 
        test: /(vendor\.css|global\.css)/, 
        loaders: ['style-loader', 'css-loader'] 
       }, 
       { 
        test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i, 
        loaders: [ 
         'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
         'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
        ] 
       }, 
       { 
        test: /app.constants.ts$/, 
        loader: StringReplacePlugin.replace({ 
         replacements: [{ 
          pattern: /\/\* @toreplace (\w*?) \*\//ig, 
          replacement: function (match, p1, offset, string) { 
           return `_${p1} = ${DATAS[p1]};`; 
          } 
         }] 
        }) 
       } 
      ] 
     } 

Answer 1

당신은 당신에게 어떤 처리하지 않고 문자열을 제공하는 HTML 파일에 대한 raw-loader을 사용하고 있습니다. 대신 정확히 원하는 것을 수행하는 html-loader을 사용하려고합니다. .html 규칙을 다음과 같이 변경하십시오.

{ 
    test: /\.html$/, 
    loader: 'html-loader', 
    exclude: ['./src/main/webapp/index.html'] 
},