Webpack4 學習筆記 - 03：loader 打包靜態資源（樣式）

使用 style-loader，css-loader 打包 css 文件

首先在src目錄下建立一個 index.css 文件，內容以下：

.this_style {
    color: red;
}

修改 index.js 文件內容以下：

import './index.css';

var root = document.getElementById('root');
var wp = document.createElement('div');
wp.innerText = 'Hello, Webpack';
wp.classList.add('this_style');

root.append(wp);

代碼的內容是建立一個div，並把this_style的樣式賦給它，使它的字體變爲紅色。而後直接運行 npm run bundle 來打包會報錯嗎？固然會了，由於以前說過 webpack 只能處理 js 文件，遇到 css 文件時，它就不知道該怎麼辦了。因此咱們就配置一下 webpack.config.js 來告訴它怎麼作，配置內容以下：

const path = require('path'); // 獲得的path爲webpack.config.js所在的目錄

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    mode: 'development'
}

而後安裝 style-loader 和 css-loader：

npm install style-loader css-loader -D

安裝完以後，執行打包命令，沒有報錯，就說明 webpack 已經正確打包好了 css 文件。打開 index.html 能夠看到，字體的顏色已經變成了紅色：

下面大概來講一下 style-loader 和 css-loader 作了哪些工做，詳細的說明能夠去看官方文檔。
在src目錄下再新建一個 test.css 文件，給 this_style 樣式加一個背景色：

.this_style {
    background-color: #999999; /* 灰色 */
}

而後在 index.css 文件中引入 test.css：

@import './test.css';

.this_style {
    color: red;
}

執行打包命令，打開 index.html 查看結果:

打包成功, 背景色顯示了出來。
在這段打包的過程當中，css-loader 會根據 css 的語法，好比 @import.. 分析出幾個 css 文件的關係，而後把它們合併成一段 css，style-loader 在獲得 css-loader 生成的內容以後，會把這段內容添加到指定的內頁元素上，最後呈現出上圖的結果。

使用 stylus-loader 打包 stylus 樣式文件

接下來咱們試一下打包 stylus 樣式文件，在 src 目錄下新建一個 test.styl 文件，內容爲：

.this_style
  height 50px
  width 200px
  border 10px solid blue
  transform translate(100px, 100px)

而後在 index.css 文件中使用 @import './test.styl'; 引入這個文件，配置 webpack.config.js 文件：

const path = require('path'); // 獲得的path爲webpack.config.js所在的目錄

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(css|styl)$/,
            use: ['style-loader', 'css-loader', 'stylus-loader']
        }]
    },
    mode: 'development'
}

別忘了安裝 stylus 和 stylus-loader ：

npm install stylus stylus-loader -D

最後執行打包，查看頁面顯示的內容：

一切正常，新的樣式已經加了上去，說明打包 stylus 樣式文件成功。
請注意，使用 loader 打包時，是有執行順序的，依次爲 從右到左執行 和 從下到上執行：

這裏的執行順序爲：先用 stylus-loader 將 styl 文件翻譯爲 css，而後 css-loader 處理好這些 css，最後給到 style-loader 作最後的處理。

使用 postcss-loader 處理一些 css 需求

注意看這個地方：

像 transform 這種樣式，目前都有各大瀏覽器的廠商前綴，好比 -webkit-transform，但咱們只寫了 transform， 能不能借助一些工具自動添加上這些前綴呢，固然是能夠的，這裏咱們就使用 postcss-loader。

查看 postcss-loader 的文檔，須要建立一個 postcss.config.js 文件， 在根目錄下建立這個文件，內容以下：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在配置裏，咱們使用 require('autoprefixer') 來引入 autoprefixer 插件自動給樣式添加瀏覽器廠商前綴。
在 webpack.config.js 裏添加 postcss-loader:

use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'] // 從右到左執行

最後，安裝 postcss-loader 和 autoprefixer：

npm install postcss-loader autoprefixer -D

執行打包命令，查看結果：

能夠看到，瀏覽器廠商前綴已經自動加上了，不須要咱們再手動敲了，很是方便。