配置Loader (CSS-Loader & Style-Loader 的關係)

Webpack能夠以指定入口的一系列相互依賴的模塊打包成一個文件，模塊能夠是js，也能夠是其餘類型的文件，但其餘類型的文件須要對應的Loader轉義

配置Loader的方式

在webpack.config.js文件的module.rules下配置，一個對象便配置了編譯該類型文件的Loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, // 文件類型
        include: [],   // 查找文件的範圍
        exclude: [],   // 查找文件需排除的文件夾
        use: ['loader']// 處理文件的Loader，可配置多個Loader
      }
    ]
  }
}
複製代碼

use配置

use是一個數組，其中能夠配置多個Loader，webpack中多個Loader會按從右到左的順序執行

use數組能夠包含字符串和對象

use字符串

若是use中包含的是字符串，則表示的是Loader的名稱

use: ['style-loader', 'css-loader']
複製代碼

use對象

若是use包含的是對象，則對象中loader表示Loader加載器的名稱，options表示Loader的額外配置，它是用來給Loader傳參的

use: [{
    loader: 'babel-loader',
    options: { // 額外配置，用於給Loader傳參
        presets: ['@babel/preset-env'], // presets設置的是當前JS的版本
        plugins: [require('@babel/plugin-transform-object-rest-spread')] // 須要的插件
    }
}]

use: [{
    loader: 'file-loader',
    options: { // 不一樣的加載器，參數不一樣
        name: '[name].[hash:8].[ext]',
        publicPath: './images',
        outputPath: './images'
    }
}]

複製代碼

CSS模塊

• 引入CSS的兩種方式
  • 第一種：在引入CSS時，在最後生成的JS文件中進行處理，動態建立Style標籤，放入head標籤中
  • 第二種：在打包時，將CSS文件拆分出來，CSS相關模塊最終打包到一個指定的CSS文件中，經過手動添加link標籤去引入這個文件

Webpack編譯CSS(第一種)

安裝style-loader和css-loader模塊，並在webpack.config.js中配置Loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
}
複製代碼

在遇到.css文件，Webpack會先用css-loader去解析這個文件，遇到@import等語句就將相應樣式文件引入，最後全部的CSS將使用style-loader生成一個內容爲最終解析完的CSS代碼的Style標籤，放到head標籤裏

第二種方式

使用extract-text-webpack-plugin插件，將css-loader和style-loader編譯好的CSS文件抽離出來，放到一個單獨問.css文件中，而後在index.html中使用link引入

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    }]
  },
  // CSS存放到style.css文件中
  plugins: [new ExtractTextPlugin("styles.css")]
}
// index.html 
// /dist/爲輸出文件，具體看本身的output配置
<link rel="stylesheet" href="./dist/style.css" type="text/css" />

複製代碼