weback 1.0.2 juejin.cn/post/684490…
通过对webpack 1.0.2的操作和配置，对于loader已经有了很清晰的了解。
html静态资源除了图片还包括css。css是排版布局，修饰html的计算机语言。而webpack打包时不能识别css文件，这时就需要配置css的loader。
Webpack - 静态资源css
同样在 webpack.config.js ，module的rules中配置css loader。
终端输入 npm install style-loader css-loader -D 下载 style-loader css-loader
配置css的loader , use是一个数组，分别使用了 style-laoder 和css-loader。⚠️
css-laoder ， 解析css文件与css文件之间的引用关系，梳理完成后生成一个css文件。
style-loader ，把css-loader解析到的一个css文件挂载到head部分。
⚠️ loader 如果是数组形式，loader的执行顺序为从下到上，从右至左。
⚠️ 处理css样式一定要同时配置 style-laoder和css-loader。
延伸到预处理语言的使用，webpack同样不能识别预处理语言，还需要在webpack中配置预处理语言的loader。
终端输入 npm install less-loader less -D 下载预处理语言less。⚠️
⚠️其他预处理语言loader配置相同。
配置less-loader时，与css-loader配置顺序一致。less-laoder的作用是翻译less为css，css-loader处理完毕之后交给style-loader挂载到头部。
为了解决浏览器样式不兼容问题，css需要加前缀来实现不同浏览器对于样式解析不一致的问题。webpack提供了postcss-loader来帮助开发者实现css自动添加前缀的功能
终端输入 npm install -D postcss-loader 下载postcss-loader
webpack postcss-loader www.webpackjs.com/loaders/pos…
打开webpack官网 postcss-loader 会看到需要创建一个 postcss.config.js 文件
新建 postcss.config.js文件
还需要一个自动添加前缀的插件autoprefixer。终端输入 npm install autoprefixer -D 下载
打包后检查是否正确的添加了前缀，如果没有正常添加，或者样式后只有一行注释，请修改资
源文件目录 \node_modules\browserslist\index.js 打开文件后 搜索 Default browsers query，做如下修改：
Default browsers query // 查询默认浏览器中筛选厂商（后续还会讲）
⚠️如果less文件中引入另一个less文件，就会造成less文件引入的另一个less文件不会从最后一个loader开始解析，这时候就需要变更less-loader的配置。
importLoaders //通过import 引入的less文件，强制性从下面两个loader开始解析。
modules //如果在一个js文件中引用另一个js文件，而恰巧被引用的js文件中包含和引用js文件元素有相同的样式命名，而引入样式为全局的状态下，就会影响被引用js文件中元素的样式。所以，css模块化就很重要。true为启用css模块化。
⚠️引用所有样式的js文件中引用方式也要发生改变。
import './index.less'; => import style from './index.less'
引用样式的js文件在使用样式时为 style.样式名称 这时各个模块的样式就没有了耦合和冲突。
Webpack - 静态资源iconfont
再次配置规则，字体文件的loader使用的是file-loader解析，如果您从webpack1.0.0随着更新操作到这里，肯定就已经下载了 file-loader。这样就可以打包iconfont。
终端输入 npm install file-loader -D 下载 file-laoder
