webpack與SPA實(shí)踐之管理CSS等資源的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹webpack與SPA實(shí)踐之管理CSS等資源的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、故城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為故城等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

前言

在學(xué)習(xí)使用webpack時(shí)，我們需要明白無(wú)論它怎么設(shè)計(jì)，它的工作原理、流程是什么，最根本的它處理的還是HTML文檔中的HTML標(biāo)簽、JavaScript、CSS、圖片等資源，而且最終的處理結(jié)果依然必須是一個(gè)HTML文檔，包括DOM、JavaScript、CSS，而CSS在文檔中的存在方式，有三種：行內(nèi)樣式，內(nèi)聯(lián)樣式，外鏈樣式，行內(nèi)樣式使用方式早已不推薦，所以webpack處理CSS方式也就兩種：

內(nèi)聯(lián)樣式：以<style>標(biāo)簽方式在HTML文檔中嵌入樣式；
外鏈樣式：打包生成CSS文件，通過(guò)<link>標(biāo)簽引入樣式；

webpack與CSS

我們知道，webpack本質(zhì)是只能處理JavaScript的，而對(duì)于其他資源，需要使用加載器和插件將其處理成JavaScript模塊，然后進(jìn)行模塊依賴管理。webpack提供style-loader和css-loader兩個(gè)加載器支持我們模塊化CSS，因此可以在其他模塊內(nèi)直接引入。

安裝

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

配置

在webpack配置文件的模塊加載器選項(xiàng)中添加如下配置：

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

當(dāng)然為了方便使用引用路徑，還可以配置路徑片段別名：

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

此時(shí)，import 'styles/index.css';等同于使用相對(duì)路徑，如import '../src/styles/indx.css';

使用

配置好以后，假如我們?cè)趕tyles目錄下創(chuàng)建了一個(gè)index.css文件，現(xiàn)在可以在JavaScript文件中直接引入該CSS: import 'styles/index.css'; 或 require('styles/index.css');

css內(nèi)容如下：

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

頁(yè)面展示如圖：

webpack與SPA實(shí)踐之管理CSS等資源的示例分析

內(nèi)聯(lián)樣式

前面提到了webpack處理CSS的方式有兩種，第一種是以內(nèi)聯(lián)方式在頁(yè)面<head>標(biāo)簽內(nèi)動(dòng)態(tài)插入<style>內(nèi)聯(lián)樣式，這種方式也是webpack的默認(rèn)處理方式，只需要簡(jiǎn)單配置如下加載器：

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

WEBPACK加載器解析順序

如上面代碼所示，無(wú)論是字符串語(yǔ)法style-loader!css-loader，亦或是數(shù)組語(yǔ)法['style-loader', 'css-loader'] ，webpack解析規(guī)則都是從右至左，依次解析并執(zhí)行加載器處理文件，前一加載器處理的輸出就是下一加載器處理的輸入，直到最后加載器處理完成；此處即webpack先調(diào)用css-loader加載器處理css文件，然后將處理結(jié)果傳遞給style-loader加載器，style-loader接受該輸入繼續(xù)處理。

CSS-LOADER

我們已經(jīng)反復(fù)強(qiáng)調(diào)，webpack只能處理JavaScript，所以對(duì)于其他諸如css或圖片等資源需要使用加載器將其轉(zhuǎn)換輸出為JavaScript模塊，webpack才能繼續(xù)處理。

css-loader加載器的作用就是支持我們像使用JavaScript模塊一樣在JavaScript文件中引用CSS文件，如require ('./index.css')，所以你可以認(rèn)為其作用是將CSS文件轉(zhuǎn)換成JavaScript模塊，于是我們可以直接通過(guò)引入JavaScript模塊的方式直接引用。

參數(shù)

css-loader有兩個(gè)常用參數(shù)：

modules: {boolean}指定是否使用CSS模塊(如:local和:global設(shè)置局部或全局樣式規(guī)則)，默認(rèn)是false，開(kāi)啟設(shè)置如css-loader?modules;
importLoaders: {number}指定css-loader加載器之前使用的加載器數(shù)量，默認(rèn)是0，設(shè)置如css-loader?importLoaders=1；

STYLE-LOADER

無(wú)論webpack怎么處理CSS文件，最終都需要將其輸出到頁(yè)面，才能實(shí)際使用該CSS規(guī)則，style-loader加載器就是將CSS以內(nèi)聯(lián)方式插入到頁(yè)面文檔，即：針對(duì)每一個(gè)輸入（通過(guò)require引入，使用css-loader轉(zhuǎn)換為JavaScript模塊，傳遞給style-loader作為輸入），style-loader在頁(yè)面<head>標(biāo)簽內(nèi)插入一個(gè)<style>標(biāo)簽，該標(biāo)簽內(nèi)樣式規(guī)則即此輸入內(nèi)容，如下實(shí)例：

webpack與SPA實(shí)踐之管理CSS等資源的示例分析

外鏈樣式

當(dāng)然，我們并不總是希望所有樣式都以內(nèi)聯(lián)方式存在頁(yè)面中，很多時(shí)候我們也希望通過(guò)外鏈方式使用樣式表，特別是樣式規(guī)則較多的時(shí)候，webpack開(kāi)發(fā)者們當(dāng)然考慮了這樣的需求。

webpack提供的style-loader加載器默認(rèn)是以內(nèi)聯(lián)方式將樣式插入文檔，我們需要使用webpack extract-text-webpack-plugin插件以實(shí)現(xiàn)輸出單獨(dú)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: [
    // 生成獨(dú)立css文件
    new ExtractTextPlugin({
      filename: 'css/[name].css'
    })
  ]

運(yùn)行webpack命令，我們會(huì)看到在dist/css/文件夾下生成相應(yīng)的CSS文件。

參數(shù)

filename {String | Function}

Extract Text Plugin為每個(gè)入口生成一個(gè)CSS文件，所以對(duì)于多入口項(xiàng)目需要指定filename參數(shù)[name]或[id]或[contenthash]生成唯一識(shí)別文件名；

disable {Boolean}

禁用此插件；

allChunks {Boolean}

allChunks: true;時(shí)指定從所有模塊中抽取CSS輸出至單獨(dú)CSS文件，包括異步引入的額外模塊；此插件默認(rèn)是只抽取初始模塊內(nèi)引入的CSS；

extract方法

該方法可以以參數(shù)指定加載器，然后接受該加載器的輸出，進(jìn)行處理。需要在加載器和插件配置中同時(shí)聲明相關(guān)配置，才能實(shí)現(xiàn)效果；在加載器配置中調(diào)用其extract方法傳入通常以下兩個(gè)參數(shù)：

1. use: 將CSS轉(zhuǎn)換成模塊的加載器；
2. fallback: 對(duì)于不被抽取輸出至單獨(dú)CSS文件的CSS模塊使用的加載器，上例中`style-loader`即說(shuō)明以內(nèi)聯(lián)方式使用，該加載器通常在`allChunks: false`時(shí)處理額外的模塊；

FILENAME與OUTPUT

在上一篇介紹了輸出文件配置output相關(guān)內(nèi)容，其中：

output.path是webpack處理文件后輸出的路徑，對(duì)于CSS文件輸出依然適用，即CSS文件也將輸出至該目錄；
output.publicPath是指瀏覽器訪問(wèn)資源時(shí)的相對(duì)基礎(chǔ)路徑，規(guī)則是: output.publicPath + output.filename;

你可以看到在本系列文章實(shí)例中filename都添加了前綴目錄，如css和scripts，你可能看到很多項(xiàng)目是不添加的，但文件入口較多時(shí)建議分類型目錄輸出，而且需要記得在瀏覽器訪問(wèn)資源時(shí)也需要添加該目錄層級(jí)。

CSS預(yù)處理器

通常在開(kāi)發(fā)較復(fù)雜的應(yīng)用時(shí)，我們都會(huì)選擇一種CSS的強(qiáng)化輔助工具，以更高效，更方便的使用CSS開(kāi)發(fā)應(yīng)用樣式，這些拓展工具就是所說(shuō)的CSS預(yù)處理器.

CSS預(yù)處理器（preprocessors）在CSS語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，令CSS更加強(qiáng)大與優(yōu)雅，有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目。
目前最常見(jiàn)的CSS預(yù)處理器有LESS，SASS，Stylus，個(gè)人用過(guò)的是前兩種，使用SASS的還是居多。

SASS

安裝

npm install --save-dev sass-loader

安裝sass-loader以后會(huì)發(fā)現(xiàn)，package.json中多了一個(gè)node-sass依賴，這是使用SASS必須的。

配置

然后添加以下配置：

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

如上，配置中傳遞了三個(gè)加載器，相對(duì)于前文處理CSS文件的加載器，在最后面多了一個(gè)sass-loader，首先加載sass-loader加載器處理SASS文件成CSS代碼，然后繼續(xù)按照前文描述流程處理CSS文件。

EXTRACT TEXT PLUGIN

和處理CSS文件一樣，上述配置最終通過(guò)style-loader將轉(zhuǎn)換后的CSS代碼內(nèi)聯(lián)到頁(yè)面，我們需要使用Extract Text Plugin生成單獨(dú)CSS文件，以外鏈方式引用：

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

  ...

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

CSS后處理器

前面講到CSS預(yù)處理器，如SASS，他們提供對(duì)CSS的拓展，包括語(yǔ)法拓展，高級(jí)特性拓展，如嵌套，變量，自動(dòng)處理添加屬性前綴等，使得我們可以以其定義的語(yǔ)法與模板方式更高效的編寫(xiě)CSS，然而這些預(yù)處理器都是另外對(duì)CSS進(jìn)行拓展，各自定義了語(yǔ)法和模板，其處理流程是對(duì)代碼進(jìn)行解析處理，然后轉(zhuǎn)換成CSS代碼。

不同預(yù)處理器有各自的定義和規(guī)范，假如你需要從LESS轉(zhuǎn)到SASS，源代碼轉(zhuǎn)換成本和學(xué)習(xí)成本頗高，而接下來(lái)要介紹的CSS后處理器并沒(méi)有這個(gè)問(wèn)題。

不同于預(yù)處理器預(yù)定義好一個(gè)語(yǔ)法和模板，然后對(duì)按照該語(yǔ)法和模板編寫(xiě)的代碼進(jìn)行處理轉(zhuǎn)換成CSS，其輸入是自定義語(yǔ)法文件，輸出是CSS代碼；后處理器（postprocessor）是對(duì)原生CSS代碼根據(jù)配置進(jìn)行處理，其輸入輸出依然是CSS代碼。

POSTCSS

現(xiàn)在最受歡迎的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是一個(gè)使用Js插件轉(zhuǎn)換樣式的根據(jù)，插件支持拓展CSS，如變量，混合，CSS屬性語(yǔ)法兼容，行內(nèi)圖片等等功能。

特性

不同于SASS提供一個(gè)功能性拓展工具，postcss更多的是提供一個(gè)CSS高效開(kāi)發(fā)工具解決方式，其本身只包含CSS解析器只能將CSS處理成一棵抽象語(yǔ)法樹(shù)（AST），同時(shí)提供一個(gè)豐富的CSS節(jié)點(diǎn)樹(shù)API，可以對(duì)語(yǔ)法樹(shù)進(jìn)行操作，另外它有一個(gè)高拓展性的插件系統(tǒng)支持我們通過(guò)引入不同插件對(duì)CSS進(jìn)行處理，一個(gè)插件的輸出還可以是下一個(gè)插件的輸入，更值得一提的是，這些插件都是JavaScript插件，前端開(kāi)發(fā)者們很容易就能根據(jù)項(xiàng)目需求定制自己的插件，所以可以總結(jié)幾點(diǎn)一以下特性：

postcss只處理CSS，概念簡(jiǎn)潔；
提供高拓展性的插件系統(tǒng)支持按需引入不同插件，實(shí)現(xiàn)不同處理；
使用JavaScript插件，開(kāi)發(fā)者可以很方便定制項(xiàng)目插件；
提供CSS節(jié)點(diǎn)樹(shù)API，可以高效的進(jìn)行CSS處理；

安裝

在webpack中使用，需要先安裝對(duì)應(yīng)加載器：

npm install --save-dev postcss-loader

插件

postcss目前有200+插件，足夠滿足絕大部分項(xiàng)目開(kāi)發(fā)需求，可以查看postcss插件，我們介紹幾個(gè)主要使用的插件。

Autoprefixer

回顧一下在預(yù)處理器中，如果我們需要為CSS代碼添加屬性前綴，需要這么實(shí)現(xiàn)呢？對(duì)于Sass，我們通常使用mixin，即混合宏，處理CSS屬性前綴，如：

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

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

如上，我們需要按照定義的語(yǔ)法和模板：先定義一個(gè)mixin，然后通過(guò)@include方式使用，最后才能輸出添加前綴的CSS代碼，當(dāng)代碼越來(lái)越多時(shí)，我們需要定義的mixin也會(huì)越來(lái)越多，而且不同預(yù)處理器定義的語(yǔ)法和模板都有差異，學(xué)習(xí)成本、轉(zhuǎn)換成本都很可能令人難以接受。

那么postcss插件怎么處理的呢？postcss提供了Autoprefixer插件處理CSS屬性前綴：

Autoprefixer插件基于Can I Use的數(shù)據(jù)，對(duì)CSS規(guī)則進(jìn)行前綴處理。

安裝

首先還是要安裝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是一個(gè)樣式開(kāi)發(fā)解決方案，其特定功能需要引入插件實(shí)現(xiàn)，上例中在指定postcss-loader加載器時(shí)為其設(shè)置了插件配置autoprefixer；當(dāng)然webpack還支持直接設(shè)置一個(gè)postcss配置文件，然后在項(xiàng)目根目錄創(chuàng)建postcss.config.js配置文件，內(nèi)容格式如下：

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

使用autoprefixer插件時(shí)可選傳入browsers參數(shù)，可以設(shè)置添加前綴的適配范圍，詳細(xì)可查閱browsers配置說(shuō)明。

混合使用CSS預(yù)處理器與后處理器 – PreCSS

也許你迫不及待想在項(xiàng)目中引入postcss，又希望能繼續(xù)使用CSS預(yù)處理器語(yǔ)法，而且需要保證以前按照某預(yù)處理器預(yù)定語(yǔ)法和模板（如SASS）編寫(xiě)的源代碼繼續(xù)穩(wěn)定使用，不需要太多的遷移和學(xué)習(xí)成本，可以做到嗎？當(dāng)然可以，可以使用預(yù)處理器PreCSS插件包，另外我們需要安裝一個(gè)postcss的scss解析器，因?yàn)閜ostcss默認(rèn)只包含一個(gè)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 內(nèi)聯(lián)方式 loader: 'style-loader!css-loader!postcss-loader'
        loader: ExtractTextPlugin.extract({
          fallback:'style-loader',
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
       }
    ]
  }

可以看到文件匹配規(guī)則，修改為/\.s?[ac]ss$/，可以匹配包括.sass, .scss, .css樣式文件；在css-loader加載器之前添加了postcss-loader加載器（webpack加載器解析順序?yàn)閺挠抑磷螅?/p>

當(dāng)然你可以不使用precss，依然使用sass-loader，則只需要修改配置：

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

對(duì)于如下SCSS代碼:

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

轉(zhuǎn)換生成如下CSS代碼：

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

處理圖片與字體文件

對(duì)于一個(gè)應(yīng)用而言，除了需要開(kāi)發(fā)HTML、CSS、JavaScript，通常還好使用到圖片，字體文件，配置文件等諸多資源，那么前端工程化流程也就必然需要對(duì)這些資源進(jìn)行處理與優(yōu)化，最典型的說(shuō)處理圖片和字體文件。

在Grunt或Gulp中，我們對(duì)圖片和字體文件的處理通常是將其從源目錄壓縮優(yōu)化處理后輸出至輸出目錄，通常是以文件目錄整體進(jìn)行處理，每次構(gòu)建時(shí)，對(duì)所有資源，包括未使用的圖片均進(jìn)行處理，效率是有局限的；而webpack中一切資源文件都可以處理成模塊，然后在編譯時(shí)管理模塊依賴，可以做到只處理存在依賴的資源（即，使用了的資源）。

圖片與字體

當(dāng)我們?cè)贘s模塊中引入CSS文件時(shí)，其中樣式規(guī)則中的背景圖片，字體文件如何處理呢？webpack只能管理模塊化的東西，需要將其模塊化，然后使用webpack管理依賴，webpack提供了file-loader加載器：

File Loader

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

通知webpack將引入的對(duì)象輸出為文件并返回其公開(kāi)資源路徑。

配置

  module: {
    loaders: [
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        loader: [
          'file-loader'
        ]
      }
    ]
  }

說(shuō)明

當(dāng)我們?cè)趈s文件中import Image from '../images/test.png'或在CSS文件中url('../images/test.png')時(shí)，file-loader將處理該圖片并在output.path目錄下輸出文件，然后將../images/test.png路徑替換成該輸出文件路徑。

注，對(duì)于html中引用的圖片，需要使用[html-loader]加載器處理(http://npm.taobao.org/package/html-loader)。

參數(shù)

emitFile: 是否輸出文件；

name: 指定輸出文件的文件名，有幾個(gè)可用內(nèi)置變量：

[name]: 引用資源的名稱；
[path]: 引用資源的相對(duì)路徑；
[ext]: 資源拓展名；
[hash]: 資源內(nèi)容的hash值，默認(rèn)使用md5算法計(jì)算得到，可以指定長(zhǎng)度值，如[hash:7]表示返回hash值前7個(gè)字符；
[hashType:hash:digestType:length]: 指定hash值計(jì)算算法類型和摘要類型，及摘要長(zhǎng)度，如sha512:hash:base64:7表示使用sha512加密算法計(jì)算hash值并且返回7個(gè)字符的base64編碼字符

實(shí)例

在配置時(shí)可以指定參數(shù)：file-loader?name=[name].[ext]?[hash:8]或者以配置對(duì)象方式：

  {
    test: /\.(png|svg|jpe?g|gif)$/,
    loaders: [
      // 'file-loader?name=[path][name].[ext]?[hash:8]'
      {
        loader: 'file-loader',
        query: {
          name: '[path][name].[ext]?[hash:8]'
        }
      }
    ]
  }

對(duì)于CSS源代碼：

  .wrapper {
    font-size: 18px;
    background: url('../images/test.png') no-repeat 0 0;
  }

輸出CSS代碼如下：

  .wrapper {
    font-size: 18px;
    background: url(assets/images/test.png?59427321) no-repeat 0 0;
  }

assets為output.publicPath指定值，images/test.png?59427321為配置文件中指定的name模板，在output.path目錄下輸出images/test.png，區(qū)別是，不會(huì)攜帶?后的參數(shù)。

另外，你也可以在js模板中這樣使用：

<img src={imgSrc} />
 ...
import imgSrc from 'path/xxx.png';

Url Loader

你可能會(huì)發(fā)現(xiàn)前面并沒(méi)有安裝file-loader，因?yàn)橛懈糜玫募虞d器url-loader，url-loader加載器是file-loader的升級(jí)版，他們唯一的不同之處在于：

url-loader可以通過(guò)limit參數(shù)指定一個(gè)尺寸值，加載器會(huì)對(duì)小于該值的資源處理返回一個(gè)Data URL，以base64的方式嵌入HTML或CSS，如url-loader?limit=65000；對(duì)于大于該尺寸的資源將使用file-loader處理并且傳遞所有參數(shù)。

mimetype

還可以設(shè)置mimetype對(duì)處理文件進(jìn)行過(guò)濾，如url-loader?mimetype=image/png將只處理png類型的資源。

安裝

npm install --save-dev url-loader

配置

該加載器對(duì)于圖片和字體文件資源都適用：

  {
     test: /\.(png|svg|jpe?g|gif)$/,
     loaders: [
       // 'url-loader?name=[path][name].[ext]?[hash:8]'
       {
         loader: 'url-loader',
         query: {
           limit: 6000,
           name: '[path][name].[ext]?[hash:8]'
         }
       }
     ]
  }, {
     test: /\.(woff|woff2|eot|ttf|otf)$/,
     loaders: [{
       loader: 'url-loader',
       query: {
         limit: 10000,
         name: '[path][name].[ext]?[hash:8]'
       }
     }]
  }

資源優(yōu)化

完成以上配置后，已經(jīng)可以在項(xiàng)目中很方便的引用各自資源了，但是通常我們還需要對(duì)圖片字體等文件進(jìn)行壓縮優(yōu)化處理，如Grunt中使用的imagemin插件一樣壓縮資源，webpack則提供了相關(guān)加載器img-loader。

安裝

npm install --save-dev img-loader

配置

  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'url-loader?name=[path][name].[ext]?[hash:8]',
      {
        loader: 'img-loader',
        options: {
          // 根據(jù)環(huán)境判斷是否啟用資源壓縮
          enabled: process.env.NODE_ENV === 'production', 
          gifsicle: {
            interlaced: false // 替換使用漸進(jìn)式渲染
          },
          mozjpeg: {
            progressive: true, // 創(chuàng)建基準(zhǔn)jpeg文件
          },
          optipng: {
            optimizationLevel: 4, // 優(yōu)化級(jí)別，0-7，值越大，壓縮越多
          }, 
          pngquant: {
            quality: '75-90', // 壓縮質(zhì)量，0-100，值越高，質(zhì)量越高
            speed: 3 // 執(zhí)行速度，0-10，速度過(guò)高質(zhì)量受損，不建議過(guò)高
          },
          svgo: {
            plugins: [
              { removeTitle: true }, // 去除標(biāo)題信息
              { convertPathData: false } // 轉(zhuǎn)換路徑為更短的相對(duì)或決定路徑
            ]
          }
        }
      }
    ]
  }

以上為常見(jiàn)使用配置，更多詳細(xì)配置信息請(qǐng)查看對(duì)應(yīng)說(shuō)明imagemin文檔，特別注意的是上面使用了process.env.NODE_ENV當(dāng)前環(huán)境變量，只有在生產(chǎn)環(huán)境啟用圖片壓縮，因?yàn)閴嚎s過(guò)程比較比較耗時(shí)，可能會(huì)降低開(kāi)發(fā)、調(diào)試效率。

數(shù)據(jù)資源

對(duì)于數(shù)據(jù)類型文件資源，webpack內(nèi)置支持加載解析.json文件，而其他類型則需要安裝配置相應(yīng)加載器，如.xml文件，需要安裝并配置xml-loader。

資源管理的思考

在傳統(tǒng)或稍早一點(diǎn)的應(yīng)用中，我們通常會(huì)將所有的圖片，字體等資源放在一個(gè)基礎(chǔ)目錄下，如assets/或images，但是對(duì)于那些在多項(xiàng)目間重復(fù)的插件代碼或資源來(lái)說(shuō)，每一次遷移，我們都得在一大堆圖片，字體資源里尋找出我們需要遷移的資源，這對(duì)代碼可重用和其獨(dú)立性有一定限制，而且與現(xiàn)在提倡的組件化開(kāi)發(fā)模式也不相符。

webpack對(duì)于資源的處理方式給組件化開(kāi)發(fā)提供了很大便利，使得我們以組件為單位，可以在某一組件目錄下存放所有相關(guān)的js，css，圖片，字體等資源文件；組件的遷移公用成本很低。不過(guò)組件化開(kāi)發(fā)并不是說(shuō)不需要資源目錄了，一些公用的資源依然放在項(xiàng)目的基礎(chǔ)目錄下。

說(shuō)明

終于可以松口氣，對(duì)于webpack管理CSS、圖片、字體、數(shù)據(jù)資源的實(shí)踐基本總結(jié)完成，其實(shí)感覺(jué)要介紹的還有很多，但是要盡量保證文章思路清晰，語(yǔ)句流暢，而且篇幅不能太長(zhǎng)，水平有限，花費(fèi)較多時(shí)間經(jīng)歷，希望能對(duì)讀者有所幫助，后續(xù)篇章也會(huì)繼續(xù)穿插介紹，力爭(zhēng)本系列能較完整、較清晰地描述如何使用webpack開(kāi)發(fā)SPA應(yīng)用。

以上是“webpack與SPA實(shí)踐之管理CSS等資源的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：webpack與SPA實(shí)踐之管理CSS等資源的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://jinyejixie.com/article32/ccsipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、云服務(wù)器、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

webpack與SPA實(shí)踐之管理CSS等資源的示例分析-創(chuàng)新互聯(lián)