样式的打包

• 普通css样式的引入
  style-loader和css-loader存在先后顺序，webpack会先执行use数组中，后面的元素。
  css-loader会将分析所有的css文件关系，并且整合为一个css文件
  style-loader负责将css内容挂在到style-loader

   module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }

• scss文件的打包
  sass-loader的作用：将sass代码转化为css代码

 module: {
        rules: [
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }]
    }

• 自动添加厂商前缀 postcss-loader配合autoprefixer

//webpack.config.js
module: {
        rules: [{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader:'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: true
                    }
                },
                'sass-loader',
                'postcss-loader'  // 预处理
            ]
        }]
    }

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

踩坑：webpack4.0后一定要写明浏览器支持列表
解决办法：在package.json中与devDependencies中添加浏览器支持列表，也可以写在独立文件中

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

• 样式的模块化

 module: {
        rules: [{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader:'css-loader',
                    options: {
                        importLoaders: 2,  //当遇到@import时，如何对loder向后移动，进行处理
                        modules: true  // 样式模块化的配置
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        }]
    }

模块化的使用

import style from './index.scss'  // 导入时，进行命名
img.classList.add(style.avatar)

• appendChild与innerHtml的区别

dom.appendChild('<div>a</div>')  // 会进行转义
dom.innerHtml('<div>a</div>')  // 不会进行转义