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"
})
]
}
笔记地址
Webpack4 学习笔记二 CSS模块转换的更多相关文章
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- Python3学习笔记(urllib模块的使用)转http://www.cnblogs.com/Lands-ljk/p/5447127.html
Python3学习笔记(urllib模块的使用) 1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- Linux内核学习笔记二——进程
Linux内核学习笔记二——进程 一 进程与线程 进程就是处于执行期的程序,包含了独立地址空间,多个执行线程等资源. 线程是进程中活动的对象,每个线程都拥有独立的程序计数器.进程栈和一组进程寄存器 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码
python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...
- python3.4学习笔记(二) 类型判断,异常处理,终止程序
python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...
随机推荐
- 性能测试工具LoadRunner10-LR之Virtual User Generator 错误处理函数
VuGen提供了错误处理函数lr_continue_on_error,用来在脚本中实时修改Vuser的出错设置.lr_continue_on_error函数语法结构如下: void lr_contin ...
- 单元测试-Junit-Mockit-PowerMock
0. Junit5 1. Junit4 //手动命令行测试 java -cp /usr1/junit:/usr1/cdncms/lib/* org.junit.runner.JUnitCore com ...
- DO、PO、BO、DTO、VO等概念
PO 全称为:Persistant Object,持久化对象,与数据库结构映射的实体,数据库中的一条数据即为一个 PO 对象. BO 全称为:Business Object,业务对象,主要作用是把业务 ...
- spring mvc改造成spring boot
一.新增依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- python反爬之网页局部刷新1
# ajax动态加载网页 # 怎样判断一个网页是不是动态加载的呢? # 查看网页源代码,如果源码中没有你要的数据,尝试访问下一页,当你点击下一页的时候,整个页面没有刷新, 只是局部刷新了,很大的可能是 ...
- poi读取excel的辅助类
补充:对于这个工具已经转为一个工程项目,采用的是saxreader方式,支持大数据文件的读取.具体可以参照 github上的源码,使用可以简单参照wiki.项目wiki地址https://git.o ...
- css3照片墙
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...
- VirtualBox中linux虚拟机和主机间的共享文件设置
设置共享文件路径 点击虚拟机 设置-->选择 共享文件夹 (图1 设置共享文件夹) 设置共享文件夹路径 1 选择路径 2 填写自定义的共享名称(在后面需要与挂载路径相对应) 3 设置自动挂载/固 ...
- intel Skylake平台安装WIN7
目前针对IntelSkylake平台安装WIN7时USB接口失灵的问题,不少硬件厂商都推出了免费修改工具来集成XHCI USB控制器驱动,这其中技嘉提供了一款Windows USB Installat ...
- javascript:json对象和json字符串的相互转换
json对象和字符串的相互转换 //使用json中的parser方法转换: var str='{"name":"fendouer", "age&quo ...