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

日期：2020-05-11 栏目：程序人生浏览：次

配置

然后添加如下配置：

 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        // 老版本 loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        loader: ExtractTextPlugin.extract({
          fallback:'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    // 生成独立css文件
    new ExtractTextPlugin({
      filename: 'css/[name].css'
    })
  ]

运行webpack命令，我们会看到在dist/css/文件夹下生成相应的CSS文件。

参数

filename {String | Function}

Extract Text Plugin为每个入口生成一个CSS文件，所以对于多入口项目需要指定filename参数[name]或[id]或[contenthash]生成唯一识别文件名；

disable {Boolean}

禁用此插件；

allChunks {Boolean}

allChunks: true;时指定从所有模块中抽取CSS输出至单独CSS文件，包括异步引入的额外模块；此插件默认是只抽取初始模块内引入的CSS；

extract方法

该方法可以以参数指定加载器，然后接受该加载器的输出，进行处理。需要在加载器和插件配置中同时声明相关配置，才能实现效果；在加载器配置中调用其extract方法传入通常以下两个参数：

1. use: 将CSS转换成模块的加载器；
2. fallback: 对于不被抽取输出至单独CSS文件的CSS模块使用的加载器，上例中`style-loader`即说明以内联方式使用，该加载器通常在`allChunks: false`时处理额外的模块；

FILENAME与OUTPUT

在上一篇介绍了输出文件配置output相关内容，其中：

output.path是webpack处理文件后输出的路径，对于CSS文件输出依然适用，即CSS文件也将输出至该目录；
output.publicPath是指浏览器访问资源时的相对基础路径，规则是: output.publicPath + output.filename;

你可以看到在本系列文章实例中filename都添加了前缀目录，如css和scripts，你可能看到很多项目是不添加的，但文件入口较多时建议分类型目录输出，而且需要记得在浏览器访问资源时也需要添加该目录层级。

CSS预处理器

通常在开发较复杂的应用时，我们都会选择一种CSS的强化辅助工具，以更高效，更方便的使用CSS开发应用样式，这些拓展工具就是所说的CSS预处理器.

CSS预处理器（preprocessors）在CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，令CSS更加强大与优雅，有助于更好地组织管理样式文件，以及更高效地开发项目。
目前最常见的CSS预处理器有LESS，SASS，Stylus，个人用过的是前两种，使用SASS的还是居多。

转载注明出处：https://www.heiqu.com/44.html

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

相关推荐