webpack4入门笔记—

什么是loader

类似gulp中的taskes，即任务

webpack除了主营JS，还可以对指定的文件进行统一处理，比如把typescript转换为js，js内导入css等

这些任务都需要安装对应的依赖，且在module.rules配置项中配置（其他方式忽略）

{
    module: {
        rules: [
            //任务配置
            {
                test:regex,//正则,匹配文件规则
                exclude:regex,//正则,不包含的文件夹
                use:[//使用到的loaders及其配置
                    {//某个loader
                        loader:'xx',
                        options:{}
                    }
                ]
            }
        ]
    }
}
复制代码

以下列举一些常常做的任务

css打包

html中不需要引入css文件，通过js间接的获取样式，这样整个html只需要引入一个js文件即可。

使用 css-loader 可以在js中直接导入css文件，并在打包时把样式也打包在output文件中
```
//比如，其中indexcss名称任意
import indexcss from './index.css';
复制代码
```
在js中使用方式：className直接写名称即可（在引入的文件类）

如何解决引入多个css重名问题？
使用 style-loader 把js中的样式输入到html中的

webpack4入门笔记——loader

什么是loader

css打包