webpack4 打包 css

構建目標：

• 編譯 sass
• 自動處理瀏覽器兼容
• 抽離成獨立文件
• 代碼去重
• 壓縮代碼

需要用到的插件：

• css-loader 樣式加載器
• sass 編譯 sass 需要的庫，這個比 node-sass 安裝似乎快一點
• sass-loader sass 加載器
• postcss-loader 樣式處理器
• autoprefixer 自動前綴
• mini-css-extract-plugin 抽離樣式爲單獨的文件
• optimize-css-assets-webpack-plugin 去重和壓縮
• cssnano 去重和壓縮需要用到的依賴

先安裝以上模塊，然後再看看如何使用它們。

首先假設我們有兩個初始文件：
app.js

import '@css/index'

index.scss

@import '../themes/variable.scss';
@import '../helpers/mixin.scss';

@import '../base/reset';

編譯 sass

想讓 webpack 能夠加載 sass 文件，得配置相應 loader，基礎的 webpack 配置如下：

{
	entry: {
        app: 'src/app.js',
    },
    output: {
        path: "dist",
        filename: "js/[name].[chunkhash].js",
    },
	module: {
        rules: [
	        {
                test: /\.(sass|scss|css)$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            }
        ]
	},
	resolve: {
    	alias: {
    		'@css': resolve('src/assets/styles'),
    	}
    },
}

這樣簡單配置就可以把 sass 文件當中的語法轉換成瀏覽器能識別的普通 css 語法了

自動處理瀏覽器兼容

說白了就是爲一些私有屬性添加瀏覽器前綴，這裏需要使用 postcss-loader 和 autoprefixer 兩個插件，需要添加 loader， 具體配置如下：

const autoprefixer = require("autoprefixer")

...

{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { 
    sourceMap: true,
    plugins: [autoprefixer({})]
} },
{ loader: 'sass-loader', options: { sourceMap: true } }

...

抽離成單獨的 css 文件

通過前面的配置，已經能夠把 sass 文件編譯成 css 文件，並且爲一些瀏覽器的私有屬性添加上前綴，但是查看打包後的源碼發現 css 全部插在 js 文件中，我們需要把它抽離成單獨的文件，這個需要用到 mini-css-extract-plugin 插件，舊版本使用 extract-text-webpack-plugin，但是 4.x 版本已經遺棄了，配置項如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...

rules: [
    {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'postcss-loader', options: { 
                sourceMap: true,
                plugins: [autoprefixer({})]
            } },
            { loader: 'sass-loader', options: { sourceMap: true } }
        ]
    }
],

...

plugins: [
	// 樣式抽離
    new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css',
        chunkFilename: 'css/[name].[contenthash].css',
    }),
]

優化和壓縮 css 文件

使用 optimize-css-assets-webpack-plugin 來壓縮和優化 css 文件，它依賴 cssnano 這個優化庫，基本沒什麼需要特別配置的，直接上代碼：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')

// 在 plugins 添加插件
new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: cssnano,
    cssProcessorPluginOptions: {
        preset: ['default', {
            discardComments: {
                removeAll: true,
            },
            normalizeUnicode: false
        }]
    },
    canPrint: true
}),

到這裏基本就 OK 了，樣式部分的打包處理大概就這麼些內容，沒有寫得太詳細，只是做一個簡單的學習筆記