前言

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

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"
      })
    ]
  }

笔记地址

Webpack4 学习笔记二 CSS模块转换的更多相关文章

  1. amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  2. Python3学习笔记(urllib模块的使用)转http://www.cnblogs.com/Lands-ljk/p/5447127.html

    Python3学习笔记(urllib模块的使用)   1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None,  ...

  3. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  4. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  5. Linux内核学习笔记二——进程

    Linux内核学习笔记二——进程   一 进程与线程 进程就是处于执行期的程序,包含了独立地址空间,多个执行线程等资源. 线程是进程中活动的对象,每个线程都拥有独立的程序计数器.进程栈和一组进程寄存器 ...

  6. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  7. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  8. python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码

    python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...

  9. python3.4学习笔记(二) 类型判断,异常处理,终止程序

    python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...

随机推荐

  1. 性能测试工具LoadRunner10-LR之Virtual User Generator 错误处理函数

    VuGen提供了错误处理函数lr_continue_on_error,用来在脚本中实时修改Vuser的出错设置.lr_continue_on_error函数语法结构如下: void lr_contin ...

  2. 单元测试-Junit-Mockit-PowerMock

    0. Junit5 1. Junit4 //手动命令行测试 java -cp /usr1/junit:/usr1/cdncms/lib/* org.junit.runner.JUnitCore com ...

  3. DO、PO、BO、DTO、VO等概念

    PO 全称为:Persistant Object,持久化对象,与数据库结构映射的实体,数据库中的一条数据即为一个 PO 对象. BO 全称为:Business Object,业务对象,主要作用是把业务 ...

  4. spring mvc改造成spring boot

    一.新增依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. python反爬之网页局部刷新1

    # ajax动态加载网页 # 怎样判断一个网页是不是动态加载的呢? # 查看网页源代码,如果源码中没有你要的数据,尝试访问下一页,当你点击下一页的时候,整个页面没有刷新, 只是局部刷新了,很大的可能是 ...

  6. poi读取excel的辅助类

    补充:对于这个工具已经转为一个工程项目,采用的是saxreader方式,支持大数据文件的读取.具体可以参照  github上的源码,使用可以简单参照wiki.项目wiki地址https://git.o ...

  7. css3照片墙

    一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...

  8. VirtualBox中linux虚拟机和主机间的共享文件设置

    设置共享文件路径 点击虚拟机 设置-->选择 共享文件夹 (图1 设置共享文件夹) 设置共享文件夹路径 1 选择路径 2 填写自定义的共享名称(在后面需要与挂载路径相对应) 3 设置自动挂载/固 ...

  9. intel Skylake平台安装WIN7

    目前针对IntelSkylake平台安装WIN7时USB接口失灵的问题,不少硬件厂商都推出了免费修改工具来集成XHCI USB控制器驱动,这其中技嘉提供了一款Windows USB Installat ...

  10. javascript:json对象和json字符串的相互转换

    json对象和字符串的相互转换 //使用json中的parser方法转换: var str='{"name":"fendouer", "age&quo ...