webpack打包html里面img后src为“[object Module]”问题

11. 

使用url-loader/file-loader结合html-loader打包

1. {

2. test: /\.(png|jpg|gif|jpeg)$/,

3. use: [{

4. loader: 'url-loader',

5. loader: 'file-loader',

6. options: {

7. name: '[name].[ext]',

8. limit: 10240

9. }

10. }]

11. },

12. {

13. test: /\.(htm|html)$/,

14. loader: 'html-loader'

15. }

发现打包后html里面，img的src为[object Module]，

 

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true，因此手动设置为false

1. {

2. test: /\.(png|jpg|gif|jpeg)$/,

3. use: [{

4. loader: 'url-loader',

5. // loader: 'file-loader',

6. options: {

7. esModule: false, // 这里设置为false

8. name: '[name].[ext]',

9. limit: 10240

10. }

11. }]

12. }

这样就可以正常打包了