webpack中，有哪些常见的Loader？他们是解决什么问题的？

file-loader

把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
  name: '[name]_[hash].[ext]',
  outputPath: 'images/',
}
}
}]

url-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
url-loader把资源文件转换为URL，file-loader也是一样的功能。不同之处在于url-loader更加灵活，它可以把小文件转换为base64格式的URL，从而减少网络请求次数。url-loader依赖file-loader。
```
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
  name: '[name]_[hash].[ext]',
  outputPath: 'images/',
  limit: 204800
}
}
}]
```

css-loader

加载 CSS(不会将加载的css样式应用到html)

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

style-loader

负责将css-loader加载到的css样式动态的添加到html-head-style标签中
一般建议将 style-loader 与 css-loader 结合使用

sass-loader

通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。

// 安装
yarn add sass-loader node-sass webpack --dev
// loader执行顺序：从下至上，从右至左
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
    loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
    loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}]
}
};

postcss-loader

webpack4中使用postcss-loader代替autoprefixer，给css3样式加浏览器前缀


// webpack.config.js
{
test: /\.scss$/,
use: [
'style-loader',
  'css-loader',
  'sass-loader',
  'postcss-loader'
],
}

//postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 2 versions'] }), ], };

Cosen95 / fe_interview