Webpack不會替換HTML文件中的圖像

我正在使用Webpack和Angular 2應用程序。 My Webpack配置文件中的加載器如下所示。我刪除了插件和導入以避免冗長的示例代碼。 Webpack使用哈希名稱替換css文件中的圖像，而不是從html文件中替換圖像。不知道我錯過了什麼。將欣賞任何指針。Webpack不會替換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]};`; 
          } 
         }] 
        }) 
       } 
      ] 
     }

來源

2017-03-03 TechCrunch

您使用raw-loader的HTML文件，它只是給你不經任何處理的字符串。相反，你想使用html-loader這正是你想要的。將.html規則更改爲：

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

來源

2017-03-03 10:33:37

我根據另一個SO答案做了完全相同的事情。當我在./src/main/webapp/app/account/password-reset/init/password-reset-init.component.ts中使用html-loader'ERROR時，出現如下錯誤：未找到模塊：錯誤：無法解析'/ Users/company/folder/myapp'中的'html-loader' @ ./src/main/webapp/app/account/password-reset/init/password-reset-init.component.ts 46 ：18-65 @ ./src/main/webapp/app/account/index.ts @ ./src/main/webapp/app/account/account.module.ts @ ./src/main/webapp/ app/app.module.ts @。/ src/main/webapp/app/app.main.ts'和更多代碼。 – TechCrunch

您需要使用'npm install --save-dev html-loader'來安裝'html-loader' –

我第一次使用webpack，並假設wepack會從它的庫中加載模塊。我從字面上浪費了至少2天，嘗試了幾件事情。非常感謝。 – TechCrunch

Webpack不會替換HTML文件中的圖像

回答

相關問題