webpack4 打包 css

构建目标：

• 编译 sass
• 自动处理浏览器兼容
• 抽离成独立文件
• 代码去重
• 压缩代码

需要用到的插件：

插件	版本	用途
css-loader	^3.5.3	样式加载器
sass	^1.26.5	编译 sass 需要的库，这个比 node-sass 安装似乎快一点
sass-loader	^8.0.2	sass 加载器
postcss-loader	^3.0.0	样式处理器
autoprefixer	^9.7.6	自动前缀
mini-css-extract-plugin	^0.9.0	抽离样式为单独的文件
optimize-css-assets-webpack-plugin	^5.0.3	去重和压缩
cssnano	^4.1.10	去重和压缩需要用到的依赖

先安装以上模块，然后再看看如何使用它们。

首先假设我们有两个初始文件：
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 添加插件
plugins: [
	new OptimizeCSSAssetsPlugin({
	    assetNameRegExp: /\.css$/g,
	    cssProcessor: cssnano,
	    cssProcessorPluginOptions: {
	        preset: ['default', {
	            discardComments: {
	                removeAll: true,
	            },
	            normalizeUnicode: false
	        }]
	    },
	    canPrint: true
	}),
]

css 当中的图片路径会怎么处理呢?

• 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留
• 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析
• 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源
• 如果路径以 ~@ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了，它会根据 alias 映射的目录结构进行解析

到这里基本就 OK 了，样式部分的打包处理大概就这么些内容，没有写得太详细，只是做一个简单的学习笔记