webpack样式模块化

下面是没有模块化的情况

// index.js文件
import avatar from './avatar.jpg'
import 'index.scss'
import createAvatar from './createAvatar'
createAvatar()
var img = new Image()
img.src = avatar
img.classList.add('avatar')
var root = document.getElementById('root')
root.append(img)


// createAvatar .js文件
import avatar from './avatar.jpg'
function createAvatar() {
    var img = new Image()
    img.src = avatar
    img.classList.add('avatar')
    var root = document.getElementById('root')
    root.append(img)
}
export default createAvatar

显示效果如下，不同文件插入的图片使用了一个样式，如果是通过import 'index.scss’这种方式引入scss文件的话，会作用于当前引入的js文件，也会作用于其它的js文件，这样是不利于我们开发的。那我们怎么解决呢

css模块化应该这么写

import avatar from './avatar.jpg'
import style from './index.scss'
import createAvatar from './createAvatar'
var img = new Image()
img.src = avatar
img.classList.add(style.avatar)
var root = document.getElementById('root')
root.append(img)

webpack开启模块化配置，modules: true

图片就只会作用当前引入的文件里面