Webpack4 学习笔记二 CSS模块转换

前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

webpack 打包css模块

webpack是js模块打包器, 如果在入口文件引入css文件或其它的less、sass等文件,需要特定的 loader去解析它们。

css-loader: 解析css文件并且支持@import()等引入css模块
style-loader: 通过插入 <style> 标记将CSS添加到DOM中

webpack 处理loader的是 module{}, 不要写成 loader: {}
rules: 加载器规则
test: 规则
use: 用什么 loader(加载器)

webpack 配置如下

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

注意: use中的loader的执行顺序是从右到左, 先使用 css-loader解析css,再使用 style-loader将解析完的css插入DOM文档中

单独抽离css文件样式以及优化CSS文件

我想将解析后的css单独抽离出一个 css文件, 然后通过 like标签的形式引入。
需要使用插件来帮忙, plugins主要是做 loader完成不了的事情。功能很强大。

mini-css-extract-plugin: 此插件将CSS提取到单独的文件中。

• 先安装
• const MixiCssExtractPlugin = require('mini-css-extract-plugin')

webpack配置如下, 基与上面的代码修改

module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             MixiCssExtractPlugin.loader,
             'css-loader'
            ]
         }
       ]
     },
     plugins: [
       new MixiCssExtractPlugin({
         filename: "[name].css",
         chunkFilename: "[id].css"
       })
     ]
   } 

处理 sass文件

需要安装 sass sass-loader

webpack 配置如下

  module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MixiCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    plugins: [
      new MixiCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  }

优化压缩 css文件和js文件

上面虽然已经可以把 css 单独抽离成一个 css文件, 但是代码并没有得到压缩, 下面进行压缩等优化处理
安装插件:
optimize-css-assets-webpack-plugin: 用于优化\最小化CSS资产的Webpack插件
uglifyjs-webpack-plugin: 用于优化 js资产的 Webpack插件

webpack 配置:

const OptimizeCssAddetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyjsWebpackPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
                parallel: true, // 并行化可以显著加速构建，因此强烈建议设置为 true
                sourceMap: true, // 使用源映射,将错误信息位置映射到模版
            }),
            // 使用压缩css插件之前,一定要使用 uglifyjs-webpack-plugin插件对js代码进行压缩
            new OptimizeCssAddetsWebpackPlugin({}),
        ]
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MixiCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    plugins: [
      new MixiCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  }

笔记地址