1. 程式人生 > >關於Webpack 靜態Html中 圖片打包的問題

關於Webpack 靜態Html中 圖片打包的問題

解決方案有三種:

1.通過import方式引入圖片;

例:import imgUrl from 'path/to/..png';

2.通過CommonJS方式引入;

var imgUrl = requrie('path/to/..png');

3.通過html-loader外掛方式來解決;

步驟:一、npm install -d html-loader;

           二、把下面程式碼放入webpack.config.js配置裡:

           {
              test: /\.(html)$/,
              use: {
                   loader: 'html-loader',
                   options: {
                         attrs: ['img:src', 'img:data-src', 'audio:src'],

                         minimize:true
                   }
             }
          }