從0構建webpack開發環境(二) 添加css,img的模塊化支持

在一個簡單的webpack.config.js中，構建了一個基礎的webpack.config.js文件，可是隻支持js模塊的打包。

本篇中添加對css和img的模塊化支持

首先須要安裝三個個loader css-loader, style-loader,file-loader

yarn add css-loader style-loader

css-loader用於對css文件的解析，style-loader會將解析的css樣式以style標籤的形式插入到html文件中

安裝好以後，須要修改webpack.config.js配置模塊,

在以前的webpack的配置文件基礎上，新加上module屬性, 裏面的style-loader須要在css-loader以前

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

rules屬性則是匹配請求的Rule(規則)數組，數組每一項Rule對象均可用於匹配某一類型的模塊。

用於匹配css模塊的Rule,裏面包含了兩個屬性test和use,
test通常是一個正則表達式，用於匹配須要解析的模塊文件, use數組則通常指定使用哪些loader，裏面每一項能夠是字符串或者是對象

use:[
    'style-loader'
]
// 等同於
use: [
    {
        loader: 'style-loader'
    }
]

這裏還能夠使用postcss-loader插件爲css屬性添加瀏覽器前綴

在完成配置文件和依賴安裝後，在src文件目錄下新建style.css

.red{
  color: red;
}

同時在index.js文件中引入該css文件,

import _ from 'lodash'
import './style.css'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')
  
  element.classList.add('red')

  return element
}

document.body.append(createComponent('div'))

以後執行打包指令， 而後打開dist目錄下的index.html文件就會看到文字顏色已是紅色，同時在head標籤裏多了一個style標籤，裏面就是style.css裏面的樣式

同理能夠經過file-loader處理圖片資源,在配置文件中添加圖片文件的匹配

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|bmp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      }
    ]
  }

在這個Rule.use規則中，經過options.name屬性將圖片文件打包到dist/img目錄下，[name].[ext]佔位符，讓打包後的文件使用原來的文件名和後綴,
以後在index.js中引入一個圖片

import _ from 'lodash'
import './style.css'
import ImgFile from './asset/tim.jpg'

function createComponent(tag) {
  let element = document.createElement(tag)

  element.innerHTML = _.join(['Hello', 'webpack'], ', ')
  element.classList.add('red')

  let img = new Image()
  img.src = ImgFile

  element.append(img)

  return element
}

document.body.append(createComponent('div'))

接着執行打包指令，就會看到dist目錄下多了一個img文件夾，裏面就是咱們引入的圖片。打開index.html就會看到圖片

至此，就已經完成了對css和img的引入。可是當前的樣式文件是以style標籤的形式插入到html中的。

可是咱們想要的是把css文件抽離出來一個單獨的css文件
那麼就須要plugin了，這裏使用官方推薦的 MiniCssExtractPlugin 插件，這個插件須要額外安裝,
在上一篇中，index.html是手動建立的,這裏能夠使用 HtmlWebpackPlugin 自動咱們自動建立html文件，同時webpack還會在html裏面自動添加css和script的外鏈，
這樣就不用手動的引入css和js文件了。

安裝 兩個插件yarn add mini-css-extract-plugin html-webpack-plugin,

安裝完成後須要在config文件頂部引入兩個插件，而後在文件中添加 plugins 屬性數組，在數組裏經過new方式配置，
同時將以前的style-loader替換成MIniCssExtractPlugin提供的loader

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 ...
  module: {
    ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // 將'style-loader'替換成MIniCssExtractPlugin.loader
          'css-loader'
        ]
      },
    ...
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ]
}

這裏還須要一個CleanWebpackPlugin插件清空dist文件夾，這樣每次打包都不用手動刪除舊的文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 新的CleanWebpackPlugin 引入方式，舊的已不可用

以後刪除dist文件夾，執行打包，就會看到新打包的文件，自動建立的index.html文件

完整的webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: {
    app: path.resolve(__dirname, './src/index.js')
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|bmp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    }),
    new CleanWebpackPlugin()
  ]
}