什么是loader

loader 用于对模块的源代码进行转换
loader 可以使你在 import 或"加载"模块时预处理文件
因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
复制代码

介绍

webpack提供两个工具处理样式表，css-loader 和 style-loader

二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中  

用 css-loader 和 style-loader 处理 CSS
复制代码

css-loader

css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。
复制代码

style-loader

style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容
复制代码

file-loader

生成一个新的css文件
复制代码

style-loader/useable

在style中控制样式插入或者不插入，import了css后可以使用 .use() 或者 .unuse()的方法来控制样式是否插入    
复制代码

style-loader/url

 在html中插入一个link标签(配合file-loader使用),一个很小众的功能，会把每个import的css都处理成一个link标签，造成加载资源的增加，不利于优化
复制代码

用 css-loader 和 style-loader 处理 CSS

1. 安装

cnpm install css-loader style-loader --save-dev
复制代码

2. 配置

//配置css加载器
{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}


或者这样配置
 {
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader' //使用style-loader进行处理，位置必须在css-loader前面
      },
      {
        loader: 'css-loader'
      }
    ],
  },
复制代码

3. 在index.js中引入css文件即可

import '../css/index.css'    
复制代码

用 sass-loader 把 SASS 编译成 CSS

1. 安装

cnpm install sass-loader node-sass --save-dev    
复制代码

2. 配置

//配置sass
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}
复制代码

3 在index.js中引入scss文件即可

import '../css/index.scss'
复制代码

将css文件从js中分离出来

1. 安装

cnpm install --save-dev mini-css-extract-plugin
复制代码

2. 配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//插件配置
new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // all options are optional
  filename: 'skin/[name]/css/[name].css',
  chunkFilename: '[id].css',
  ignoreOrder: false, // Enable to remove warnings about conflicting order
}),


//规则配置
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../',
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
    ],
  },
  //配置sass
  {
    test: /\.scss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../',
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
      'sass-loader'
    ],
  }
复制代码

postcss-loader自动添加厂商前缀

1. 在此之前先确保已经安装style-loader

cnpm install postcss-loader autoprefixer --save-dev
复制代码

www.cnblogs.com/RoadAspenBK…