自學 webpack4.x 基礎篇---webpack 解析樣式

時間 2019-11-17

標籤自學 webpack4.x webpack 基礎解析樣式简体版

原文原文鏈接

1.前言

上一章我們學習如何來處理 html 文件，打包、hash戳我們已經瞭解了，那麼接下來這一章我們要學習的是如何來處理樣式，好比：css、less這些應該如何處理呢？那麼，讓咱們一塊兒來學習吧！！！css

咱們知道，webpack 默認是支持 js 模塊的，那麼，咱們如今 src 目錄下面創建一個 css 文件，而後在 js 中引入css文件，固然有小夥伴會問了，爲何不在 html中引入 css呢？咱們的 html 文件只是一個模板，在它裏面引入css的話它會原封不動的輸出，咱們的css並不會打包到build目錄下面，因此這種方法是不行的。 html

首先咱們新建一個css文件，而後在js文件中引入咱們的css文件，如上圖。這個時候咱們啓動一下服務來看一下：（ npm run dev）

這個時候是會報錯的，提示咱們說不支持，由於這個東西默認不是一個模塊，你須要一個合適的 loader去解析這個模塊。

loader的做用：把咱們的源代碼進行轉化，能夠幫咱們轉化出來一個模塊。webpack

2.模塊配置

如上所述，這個時候就須要來配置咱們的 css模塊了。web

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        })
    ],
    module: { //模塊
        rules: [ //規則
            // css-loader(處理咱們的css，主要負責解析 @import這種語法的)
            // style-loader 它是把 css 插入到 head 的標籤中
            // loader的特色： 但願單一性（一個loader處理一件事情）
            // loader 的用法 ：一個 loader 用字符串表示，多個loader 須要用 []表示
            // loader 的順序，默認是從右向左執行 從下到上執行
            // loader 還能夠寫成對象的方式，能夠傳參數
            {
                test: /\.css$/, //用正則來匹配以 css 結尾的文件
                use: [
                    //咱們要先處理 css樣式，在插入到 head標籤中去
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
複製代碼

上面的配置已經詳細的介紹了我們用到的這兩個loader的做用，那麼如今讓咱們重啓一下服務，看一下loader起做用了嗎： npm

運行結果如圖，爲何沒有找到呢，那是由於咱們只是配置了 loader，可是尚未安裝這兩個loader，因此找不到，安裝命令：yarn add css-loader style-loader -D. 安裝好以後再從新啓動服務：數組

這個時候已經運行正常了，那麼，讓咱們來訪問一下頁面：

能夠看到，頁面的背景如今應景變成了紅色，和我們設置的顏色是同樣的，說明 css-loader 運行成功。

打開調試工具，能夠看到咱們的樣式是插入到head標籤中的，這說明咱們的 style-loader也是起做用的。

3.css-loader （主要解析 @import語法）

配置文件中也說明了這個，如今來讓咱們試一試。瀏覽器

在 src 目錄下面在新建一個 a.css 文件
而後將a.css文件引入到index.css文件中：如圖

重啓服務：緩存

如圖，和咱們設置的樣式是同樣的，說明這兩個loader都運行成功。

4.處理less文件

css文件已經能夠處理了，如何處理less文件呢，這個時候咱們就須要先安裝 less 和 less-loader來處理less了。yarn add less less-loader -D
安裝好以後，到配置文件中配置咱們的less規則。

module: { //模塊
        rules: [ //規則
            {
                test: /\.css$/, //用正則來匹配以 css 結尾的文件
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader' //把 less --->轉換爲 css
                ]
            }
        ]
    }
複製代碼

在src目錄下面新建一個 index.less文件，如圖：
在index.js中引入咱們的less文件：

從新啓動服務：（npm run dev）

這個時候咱們可以看到樣式已經生效，說明 less文件能夠加載了。併發

5.抽離css樣式

從上圖咱們能夠看到，咱們所寫的css、less樣式都會放到head標籤中，那麼咱們如何單獨把css的內容抽離出來用link標籤的形式引入呢：less

首先，先安裝抽離 css 的插件 : yarn add mini-css-extract-plugin -D
安裝好以後，在配置文件中引入：let MiniCssExtractPlugin = require('mini-css-extract-plugin')
而後在配置文件中的插件配置中進行配置：

plugins: [ //數組， 放着全部的 webpack插件
        new MiniCssExtractPlugin({
            filename:'main.css', //抽離出來的css的文件的名字
        })
    ],
複製代碼

而後選擇，究竟是 css 文件要抽離，仍是 less 文件要抽離，那個要抽離就給那個加上抽離插件的內置loader。（在模塊中的 css 、less 規則中加）：以下：

module: { //模塊
        rules: [ //規則
            {
                test: /\.css$/, //用正則來匹配以 css 結尾的文件
                use: [
                    MiniCssExtractPlugin.loader,//這個loader的做用是：抽離出來 css而後用 link 標籤引入到 模板文件中
                    'css-loader'
                ]

![](https://user-gold-cdn.xitu.io/2019/11/14/16e68118b17b28e6?w=1477&h=705&f=jpeg&s=127105) },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,//這個loader的做用是：抽離出來 css而後用 link 標籤引入到 模板文件中
                    'css-loader',
                    'less-loader' //把 less --->轉換爲 css
                ]
            }
        ]
    }
複製代碼

運行npm run build命令，看一下是否單獨抽離出來css文件：

能夠看到，咱們的css文件已經被單獨抽離出來了，啓動一下服務看一下頁面效果：

如今已經變成抽離出來的css文件是用link標籤來引入的。

6.自動添加前綴

css有些樣式爲了支持每一個瀏覽器，須要添加前綴，接下來咱們學習一下如何自動添加前綴。咱們先來試一下如今的效果，咱們在less文件中添加樣式：

執行打包命令能夠看到打包出來的main.css文件中樣式並無添加前綴：

添加自動添加前綴的插件和 loader ：yarn add postcss-loader autoprefixer -D 而後進行配置：加前綴的 loader 是在解析 css 的 loader以前，配置 css 規則中的配置：

module: {
        rules: [ 
            { 
                test: /\.css$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader' //自動添加前綴的 loader
                ]
            },
            { 
                // 能夠處理 less 文件。
                test: /\.less$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader', //自動添加前綴的 loader
                    'less-loader',  //把 less ->轉換爲 css
                ]
            },
        ]
    },
複製代碼

這個時候你啓動服務的話是會報錯的（由於它須要一個配置文件）：

須要新建一個自動增長前綴插件的配置文件，文件名叫：postcss.config.js（在項目的根目錄下創建），這個配置文件裏面的內容須要導出自動加前綴的插件：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
複製代碼

那麼，這個時候咱們在來打包看一下：

已經將咱們的樣式前綴添加上了。

7.壓縮css代碼（優化css資源）

根據上圖咱們能夠看到，這個時候的css代碼是沒有打包的。

優化 css 的插件：optimize-css-assets-webpack-plugin ，安裝插件。
而後在配置文件中引入這個插件

let OptimizeCss = require('optimize-css-assets-webpack-plugin')
複製代碼

這個插件並非在配置文件中的插件配置中使用，而是要新建一個優化項，在優化項中使用插件。

module.exports = {
	optimization: { //優化項
        minimizer: [
            new OptimizeCss() //優化css
        ]
    },
    plugins: [ //數組， 放着全部的 webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',  //模板文件（html文件）的位置
            filename: 'index.html',  //打包後的文件名字
            minify: {  //壓縮 html 文件
                removeAttributeQuotes:true,  //刪除屬性的雙引號
                collapseWhitespace:true //摺疊空行，變成一行
            },
            hash: true,
        }),
        new MiniCssExtractPlugin({
            filename:'main.css', //抽離出來的css的文件的名字
        })
    ],
}
複製代碼

讓咱們打包一下，看一下效果：

咱們打包出來的css已經被壓縮。可是，這個時候咱們能夠看一下咱們的 js 文件，js 文件已經恢復到原樣了，並無被打包。

這個時候 css 已經優化好, 可是 js 不可以打包了。因此用了這個插件以後，必須使用 uglifyjs-webpack-plugin 這個插件來壓縮 js. 先要安裝插件。
而後在優化項中配置這個插件：

optimization: { //優化項
        minimizer: [
            new UglifyJsPlugin({
                cache: true, //是否用緩存
                parallel: true, //是不是併發打包（一塊兒壓縮多個）
                sourceMap: true
            }),
            new OptimizeCss() //優化css
        ]
    },
複製代碼