前言

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

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, // 并行化可以显著加速构建，因此强烈建议设置为 truesourceMap: 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"})]}

笔记地址