webpack 学习笔记7

模块的加载方式

1、遵守ES Modules 标准的 import 声明 import icon from './icon.png'

2、遵循CommonJS 标准的 require 函数 const fs = require('fs')

​ 注意：若是导入ESModule的话，需要加.default

​ const heading = require('./heading.js').default

3、遵循AMD 标准的 define 函数和 require 函数

非必要，不要混合使用，否则会大大降低可维护性！

部分loader加载的资源中一些用法也会触发资源模块加载

4、样式代码中的 @import 指令和 url函数

css中background:url(../image/1.png) 本来只是css-loader，然后到这个语句时，会触发对应的url-loader进行处理

5、HTML 代码中图片标签的 src 属性

html文件，也是需要导入到js中才能参与打包过程，可以使用import导入

​ 注意：html文件会默认会将html代码作为字符串导出，所以需要一个变量接收

import footerHTML from '../index.html'
document.write(footerHTML) //输出到页面中

需要安装html-loader才能识别，然后在配置文件添加：

{
	test: /.html$/,
	use:{
		loader: 'html-loader',
        options: {
            attrs: ['img:src','a:href']
        }
	}
}

但仍存在问题，html-loader默认只会处理img的src属性，a标签的src就不行，所以需要添加上图的 attrs 属性。