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

站长资源 2024/9/22 佚名

39 1538 39

相思资源网 Design By www.200059.com

上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务、自动刷新、模块热替换、使用ES6编写JavaScript的开发环境，本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 – CSS及其他诸如图片、字体文件或者数据配置文件等资源。

前言

在学习使用webpack时，我们需要明白无论它怎么设计，它的工作原理、流程是什么，最根本的它处理的还是HTML文档中的HTML标签、JavaScript、CSS、图片等资源，而且最终的处理结果依然必须是一个HTML文档，包括DOM、JavaScript、CSS，而CSS在文档中的存在方式，有三种：行内样式，内联样式，外链样式，行内样式使用方式早已不推荐，所以webpack处理CSS方式也就两种：

内联样式：以<style>标签方式在HTML文档中嵌入样式；
外链样式：打包生成CSS文件，通过<link>标签引入样式；

webpack与CSS

我们知道，webpack本质是只能处理JavaScript的，而对于其他资源，需要使用加载器和插件将其处理成JavaScript模块，然后进行模块依赖管理。webpack提供style-loader和css-loader两个加载器支持我们模块化CSS，因此可以在其他模块内直接引入。

安装

npm install --save-dev style-loader css-loader

配置

在webpack配置文件的模块加载器选项中添加如下配置：

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }

当然为了方便使用引用路径，还可以配置路径片段别名：

  alias: {
    styles: path.resolve(__dirname, 'src/styles/')
  }

此时，import 'styles/index.css';等同于使用相对路径，如import '../src/styles/indx.css';

使用

配置好以后，假如我们在styles目录下创建了一个index.css文件，现在可以在JavaScript文件中直接引入该CSS: import 'styles/index.css'; 或 require('styles/index.css');

css内容如下：

  html, body {
    width: 100%;
    height: 100%;
  }
  .container {
    color: red;
  }

页面展示如图：

内联样式

前面提到了webpack处理CSS的方式有两种，第一种是以内联方式在页面<head>标签内动态插入<style>内联样式，这种方式也是webpack的默认处理方式，只需要简单配置如下加载器：

  {
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
    // or 
    // loaders: ['style-loader', 'css-loader']
  }

WEBPACK加载器解析顺序

如上面代码所示，无论是字符串语法style-loader!css-loader，亦或是数组语法['style-loader', 'css-loader'] ，webpack解析规则都是从右至左，依次解析并执行加载器处理文件，前一加载器处理的输出就是下一加载器处理的输入，直到最后加载器处理完成；此处即webpack先调用css-loader加载器处理css文件，然后将处理结果传递给style-loader加载器，style-loader接受该输入继续处理。

CSS-LOADER

我们已经反复强调，webpack只能处理JavaScript，所以对于其他诸如css或图片等资源需要使用加载器将其转换输出为JavaScript模块，webpack才能继续处理。

css-loader加载器的作用就是支持我们像使用JavaScript模块一样在JavaScript文件中引用CSS文件，如require ('./index.css')，所以你可以认为其作用是将CSS文件转换成JavaScript模块，于是我们可以直接通过引入JavaScript模块的方式直接引用。

参数

css-loader有两个常用参数：

modules: {boolean}指定是否使用CSS模块(如:local和:global设置局部或全局样式规则)，默认是false，开启设置如css-loader"text-align: center">

外链样式

当然，我们并不总是希望所有样式都以内联方式存在页面中，很多时候我们也希望通过外链方式使用样式表，特别是样式规则较多的时候，webpack开发者们当然考虑了这样的需求。

webpack提供的style-loader加载器默认是以内联方式将样式插入文档，我们需要使用webpack extract-text-webpack-plugin插件以实现输出单独CSS文件。

EXTRACT TEXT PLUGIN

安装

首先安装该插件：

npm install --save-dev extract-text-webpack-plugin

配置

然后添加如下配置：

 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的还是居多。

SASS

安装

npm install --save-dev sass-loader

安装sass-loader以后会发现，package.json中多了一个node-sass依赖，这是使用SASS必须的。

配置

然后添加以下配置：

  {
    test: /\.s[ac]ss$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader!sass-loader'
  }

如上，配置中传递了三个加载器，相对于前文处理CSS文件的加载器，在最后面多了一个sass-loader，首先加载sass-loader加载器处理SASS文件成CSS代码，然后继续按照前文描述流程处理CSS文件。

EXTRACT TEXT PLUGIN

和处理CSS文件一样，上述配置最终通过style-loader将转换后的CSS代码内联到页面，我们需要使用Extract Text Plugin生成单独CSS文件，以外链方式引用：

  {
     test: /\.s[ac]ss$/,
     exclude: /node_modules/,
     loader: ExtractTextPlugin.extract({
     fallback:'style-loader',
       use: [
         'css-loader',
         'sass-loader'
       ]
     })
  }

  ...

  // 生成独立css文件
    new ExtractTextPlugin({
      filename: 'css/[name].css'
    })

CSS后处理器

前面讲到CSS预处理器，如SASS，他们提供对CSS的拓展，包括语法拓展，高级特性拓展，如嵌套，变量，自动处理添加属性前缀等，使得我们可以以其定义的语法与模板方式更高效的编写CSS，然而这些预处理器都是另外对CSS进行拓展，各自定义了语法和模板，其处理流程是对代码进行解析处理，然后转换成CSS代码。

不同预处理器有各自的定义和规范，假如你需要从LESS转到SASS，源代码转换成本和学习成本颇高，而接下来要介绍的CSS后处理器并没有这个问题。

不同于预处理器预定义好一个语法和模板，然后对按照该语法和模板编写的代码进行处理转换成CSS，其输入是自定义语法文件，输出是CSS代码；后处理器（postprocessor）是对原生CSS代码根据配置进行处理，其输入输出依然是CSS代码。

POSTCSS

现在最受欢迎的CSS后处理器，就是postcss：

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS是一个使用Js插件转换样式的根据，插件支持拓展CSS，如变量，混合，CSS属性语法兼容，行内图片等等功能。

特性

不同于SASS提供一个功能性拓展工具，postcss更多的是提供一个CSS高效开发工具解决方式，其本身只包含CSS解析器只能将CSS处理成一棵抽象语法树（AST），同时提供一个丰富的CSS节点树API，可以对语法树进行操作，另外它有一个高拓展性的插件系统支持我们通过引入不同插件对CSS进行处理，一个插件的输出还可以是下一个插件的输入，更值得一提的是，这些插件都是JavaScript插件，前端开发者们很容易就能根据项目需求定制自己的插件，所以可以总结几点一以下特性：

postcss只处理CSS，概念简洁；
提供高拓展性的插件系统支持按需引入不同插件，实现不同处理；
使用JavaScript插件，开发者可以很方便定制项目插件；
提供CSS节点树API，可以高效的进行CSS处理；

安装

在webpack中使用，需要先安装对应加载器：

npm install --save-dev postcss-loader

插件

postcss目前有200+插件，足够满足绝大部分项目开发需求，可以查看postcss插件，我们介绍几个主要使用的插件。

Autoprefixer

回顾一下在预处理器中，如果我们需要为CSS代码添加属性前缀，需要这么实现呢？对于Sass，我们通常使用mixin，即混合宏，处理CSS属性前缀，如：

  // 定义
  @mixin prefix-animation($animation-name){
    animation:$animation-name;
    -webkit-animation:$animation-name;
  }

  // 使用
  body{
    @include prefix-animation(loading .5s linear infinite);
  }

如上，我们需要按照定义的语法和模板：先定义一个mixin，然后通过@include方式使用，最后才能输出添加前缀的CSS代码，当代码越来越多时，我们需要定义的mixin也会越来越多，而且不同预处理器定义的语法和模板都有差异，学习成本、转换成本都很可能令人难以接受。

那么postcss插件怎么处理的呢？postcss提供了Autoprefixer插件处理CSS属性前缀：

Autoprefixer插件基于Can I Use的数据，对CSS规则进行前缀处理。

安装

首先还是要安装Autoprefixer:

npm install --save-dev autoprefixer

配置

添加如下配置：

  module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loaders: [
          'style-loader',
          'css-loader',
          { 
            loader: 'postcss-loader', 
            options: {
              plugins: [
                require('autoprefixer')({
                  browsers: ['last 2 versions']
                })
              ] 
            } 
          }
        ]
      }
    ]
  }

如上，我们知道postcss是一个样式开发解决方案，其特定功能需要引入插件实现，上例中在指定postcss-loader加载器时为其设置了插件配置autoprefixer；当然webpack还支持直接设置一个postcss配置文件，然后在项目根目录创建postcss.config.js配置文件，内容格式如下：

  module.exports = {
    plugins: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
      // or just require('autoprefixer')
    ]
  }

使用autoprefixer插件时可选传入browsers参数，可以设置添加前缀的适配范围，详细可查阅browsers配置说明。

混合使用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"htmlcode">

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加载器：

File Loader

Instructs webpack to emit the required object as file and to return its public url.

通知webpack将引入的对象输出为文件并返回其公开资源路径。

配置

module: { loaders: [ { test: /\.(png|svg|jpe"_blank" href="http://npm.taobao.org/package/html-loader" rel="external nofollow" >http://npm.taobao.org/package/html-loader)。

参数

emitFile: 是否输出文件；

name: 指定输出文件的文件名，有几个可用内置变量：

[name]: 引用资源的名称；
[path]: 引用资源的相对路径；
[ext]: 资源拓展名；
[hash]: 资源内容的hash值，默认使用md5算法计算得到，可以指定长度值，如[hash:7]表示返回hash值前7个字符；
[hashType:hash:digestType:length]: 指定hash值计算算法类型和摘要类型，及摘要长度，如sha512:hash:base64:7表示使用sha512加密算法计算hash值并且返回7个字符的base64编码字符

实例

在配置时可以指定参数：file-loader"htmlcode">

{ test: /\.(png|svg|jpe"htmlcode"> .wrapper { font-size: 18px; background: url('../images/test.png') no-repeat 0 0; } 输出CSS代码如下： .wrapper { font-size: 18px; background: url(assets/images/test.png"htmlcode"> <img src={imgSrc} /> ... import imgSrc from 'path/xxx.png'; Url Loader 你可能会发现前面并没有安装file-loader，因为有更好用的加载器url-loader，url-loader加载器是file-loader的升级版，他们唯一的不同之处在于： url-loader可以通过limit参数指定一个尺寸值，加载器会对小于该值的资源处理返回一个Data URL，以base64的方式嵌入HTML或CSS，如url-loader"htmlcode"> npm install --save-dev url-loader 配置该加载器对于图片和字体文件资源都适用： { test: /\.(png|svg|jpe"htmlcode"> npm install --save-dev img-loader 配置 { test: /\.(jpe"_blank" href="https://github.com/imagemin" rel="external nofollow" >imagemin文档，特别注意的是上面使用了process.env.NODE_ENV当前环境变量，只有在生产环境启用图片压缩，因为压缩过程比较比较耗时，可能会降低开发、调试效率。数据资源对于数据类型文件资源，webpack内置支持加载解析.json文件，而其他类型则需要安装配置相应加载器，如.xml文件，需要安装并配置xml-loader。资源管理的思考在传统或稍早一点的应用中，我们通常会将所有的图片，字体等资源放在一个基础目录下，如assets/或images，但是对于那些在多项目间重复的插件代码或资源来说，每一次迁移，我们都得在一大堆图片，字体资源里寻找出我们需要迁移的资源，这对代码可重用和其独立性有一定限制，而且与现在提倡的组件化开发模式也不相符。 webpack对于资源的处理方式给组件化开发提供了很大便利，使得我们以组件为单位，可以在某一组件目录下存放所有相关的js，css，图片，字体等资源文件；组件的迁移公用成本很低。不过组件化开发并不是说不需要资源目录了，一些公用的资源依然放在项目的基础目录下。说明终于可以松口气，对于webpack管理CSS、图片、字体、数据资源的实践基本总结完成，其实感觉要介绍的还有很多，但是要尽量保证文章思路清晰，语句流畅，而且篇幅不能太长，水平有限，花费较多时间经历，希望能对读者有所帮助，后续篇章也会继续穿插介绍，力争本系列能较完整、较清晰地描述如何使用webpack开发SPA应用。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。 webpack,SPA,CSS资源,webpack,SPA管理CSS 标签： webpack,SPA,CSS资源,webpack,SPA管理CSS 相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com 上一篇微信小程序实现给嵌套template模板传递数据的方式总结下一篇微信小程序实现页面跳转传值以及获取值的方法分析相思资源网 Design By www.200059.com 评论“webpack与SPA实践之管理CSS等资源的方法” 再想想暂无webpack与SPA实践之管理CSS等资源的方法的评论...

www.200059.com 相思资源网 139,976影音资源 144,792福利资源 21,817软件资源 631,128技术资源最新文章多种语言下获取当前页完整URL及其参数 2024/9/22 10 asp php 清空access mysql mssql数据库的代 2024/9/22 36 ibatis简单实现与配置 2024/9/22 3 初探 SOA 2024/9/22 6 初探 SOA(补充) 2024/9/22 69 站点导航抖音极速版河马剧场京东小红书微信高德地图红果短剧夸克美团剪映拼多多支付宝淘宝快手QQ哔哩哔哩番茄小说得物阿里巴巴王者荣耀和平精英腾讯视频爱奇艺QQ音乐咸鱼之王逆水寒三国志战略版梦幻西游金铲铲之战捕鱼大作战原神英雄联盟手游网易云音乐崩坏星穹铁道优酷视屏酷狗音乐蛋仔派对


            《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
            
                
                    友情链接 
                
                    
                        杰晶网络
                        DDR爱好者之家
                        桃源资源网
                        杰网资源
                        富贵资源网
                        南强小屋
                        铁雪资源网
                        幽灵资源网
                        万梅资源网
                        狼山资源网
                        白云岛资源网
                        昆仑资源网
                        相思资源网
                        明霞山资源网
                        内蒙古资源网
                        黑松山资源网
                        茶园资源网
                        饿虎岗资源网
                        大旗谷资源网
                        常春岛资源网
                        岱庙资源网
                        兴国资源网
                        快活林资源网
                        蝙蝠岛资源网
                        帝王谷资源网
                        白云城资源网
                        伏龙阁资源网
                        清风细雨楼
                        天枫庄资源网
                        圆月山庄资源网
                        无争山庄资源网
                        神水资源网
                        移花宫资源网
                        神剑山庄资源网
                        无为清净楼资源网
                        金钱帮资源网
                        丐帮资源网
                        华山资源网
                        极乐门资源网
                        小李飞刀资源网
                        凤求凰客栈
                        风云阁资源网
                        金狮镖局
                        鸳鸯亭资源网
                        千金楼资源网
                        更多链接
                    
                
            
            相思资源网 Design By www.200059.com
            
                
                    
                        
                    
                    
                        
                    
                
                
                    
                        Copyright © 2006~2023
                        相思资源网   Design by www.200059.com  手机版