webpack核心概念_（第三章）_使用loader打包靜態資源（樣式篇-下）

補充樣式打包：
1.css-loader常用的配置
如果要配置css-loader，那麼就不能寫字符串了，而要寫一個對象

      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          }, 
          'sass-loader',
          'postcss-loader'
        ]
      }

在options配置importLoaders屬性，這個配置參數的含義是在scss文件中通過import這種方式引入的scss文件，在引入之前也要去走前面的兩個loader，也就是postcss-loader和sass-loader,這樣的話就會保證無論是在js文件中直接去引入scss文件，還是在scss文件中再去引入scss文件，都會依次從下到上執行所有的loader，不會有任何問題。
2.css打包模塊化
我們在js文件中引入的scss樣式，會有影響到另外一個文件的css樣式
比如說我們在index.js中引入scss文件

import './index.scss'
import createImage from './createdImage'
createImage ()

我們在createImage.js文件中寫入

import image from './image.jpg'
function createdImage () {
  var img = new Image();
  img.src = image
  img.classList.add('image')
  var root = document.getElementById('root')
  root.append(img)
}
export default createdImage

然後運行，發現網頁上可以渲染出index.scss的樣式，在index.js中引入的樣式可以影響到createdImage.js的樣式，也就是這樣引入的樣式是全局的，這樣引入很容易產生問題，容易全局污染，所以就出現了css module的概念
模塊化css
模塊化css指的是隻在這個模塊內有效，我們要在webpack.comfig.js中css-loader的配置項中加上modules屬性

         {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },

意思是開啓css的模塊化打包
引入也要變更：import style from './index.scss'
這時運行我們發現，改引入樣式已經影響不了createdImage.js的樣式了，只有在createdImage.js引入該樣式才能生效，添加樣式的方式也要改爲style.類名的形式

import style from './index.scss'
import image from './image.jpg'
function createdImage () {
  var img = new Image();
  img.src = image
  img.classList.add(style.image)
  var root = document.getElementById('root')
  root.append(img)
}
export default createdImage

可以運行成功
當我們配置了css nodule 這個屬性的時候，我們就可以在代碼裏寫import from這種語法了，這種語法帶來的好處，當前這個文件或者模塊裏的樣式和其他文件的樣式不會有任何耦合和衝突，這樣的話我們寫樣式就非常的獨立。
3.如何使用webpack打包字體文件
在iconfont下載圖標到本地。解壓之後得到的文件

iconfont.js 沒用可以刪除掉
如何打包字體文件？
我們把iconfont.ttf、iconfont.eot、iconfont.svg、iconfont.woff四個字體文件放在src目錄下新建的一個font文件夾，iconfont.css寫的是字體的聲明，把它放在src目錄下，首先修改字體文件的引用地址，改爲.font/字體文件名

在iconfont.scss中提供給我們一些 class，我們就可以用這些圖標了

使用方法：

import './iconfont.scss'
var root = document.getElementById('root')
root.innerHTML = '<div class="iconfont iconfood-hotdog">熱狗</div>'

但是這個時候運行項目會報錯，原因是webpack並不能識別eot、ttf這種結尾的字體文件該怎麼打包，所以針對這種字體文件，也要在webpack的配置，使用file-loader即可

      {
        test: /\.(eot|ttf|svg|woff)$/,
        use: {
          loader: 'file-loader'
        }
      },

其實我們只需要藉助file-loader從src目錄下移到dist目錄下即可
這時網頁上就可以正常顯示iconfont的圖標了

webpack打包字體文件就完成了

官網學習： DOCUMENTATION---->GUIDES----->Asset Management
DOCUMENTATION---->LOADERS-----> sass-loader、css-loader、style-loader、postcss-loader，對樣式的打包有全面的認識。