webpack与SPA实践之管理CSS等资源的方法(6)

混合使用CSS预处理器与后处理器 – PreCSS

也许你迫不及待想在项目中引入postcss，又希望能继续使用CSS预处理器语法，而且需要保证以前按照某预处理器预定语法和模板（如SASS）编写的源代码继续稳定使用，不需要太多的迁移和学习成本，可以做到吗？当然可以，可以使用预处理器PreCSS插件包，另外我们需要安装一个postcss的scss解析器，因为postcss默认只包含一个CSS解析器，postcss配置文件更新如下：

  module.exports = {
    parser: require('postcss-scss'),
    plugins: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      }),
      require('precss')
    ]
  }

webpack配置文件更新配置：

  modules: {
    loaders: [
      {
        test: /\.s?[ac]ss$/,
        exclude: /node_modules/,
        // or 内联方式 loader: 'style-loader!css-loader!postcss-loader'
        loader: ExtractTextPlugin.extract({
          fallback:'style-loader',
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
       }
    ]
  }

可以看到文件匹配规则，修改为/\.s?[ac]ss$/，可以匹配包括.sass, .scss, .css样式文件；在css-loader加载器之前添加了postcss-loader加载器（webpack加载器解析顺序为从右至左）。

当然你可以不使用precss，依然使用sass-loader，则只需要修改配置：

loader: 'style-loader!css-loader!postcss-loader!sass-loader'

对于如下SCSS代码:

  $column: 200px;
  .menu {
    display: flex;
    width: calc(4 * $column);
  }

转换生成如下CSS代码：

  .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    width: calc(4 * 200px);
  }

处理图片与字体文件

对于一个应用而言，除了需要开发HTML、CSS、JavaScript，通常还好使用到图片，字体文件，配置文件等诸多资源，那么前端工程化流程也就必然需要对这些资源进行处理与优化，最典型的说处理图片和字体文件。

在Grunt或Gulp中，我们对图片和字体文件的处理通常是将其从源目录压缩优化处理后输出至输出目录，通常是以文件目录整体进行处理，每次构建时，对所有资源，包括未使用的图片均进行处理，效率是有局限的；而webpack中一切资源文件都可以处理成模块，然后在编译时管理模块依赖，可以做到只处理存在依赖的资源（即，使用了的资源）。

图片与字体

当我们在Js模块中引入CSS文件时，其中样式规则中的背景图片，字体文件如何处理呢？webpack只能管理模块化的东西，需要将其模块化，然后使用webpack管理依赖，webpack提供了file-loader加载器：