webpack7--css压缩成单独的css文件
先看下下面的图片:
我们可以看到,通过Webpack打包后,默认CSS是通过 内部样式表 写入的。我们如何把压缩后的CSS单独导出为CSS 呢?
1.安装 extract-text-webpack-plugin@next
npm i extract-text-webpack-plugin@next -D
2.在webpack.config.js中引入该模块
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
3.在webpack.config.js 中的 plugins 中加入new ExtractTextWebpackPlugin('css提取出去的路径')
plugins: [
new ExtractTextWebpackPlugin('/css/demo.css')
]
4. 修改 webpack.config.js 中的 rules 针对css的设置,如下所示
module: {
rules: [{
test: /\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:['css-loader']
})
}]
}
5.运行 npm run start,最后结果如下:
可以看到 dist 目录下面生成了一个demo.css
感谢阅读~~
webpack7--css压缩成单独的css文件的更多相关文章
- Python实现加密压缩成RAR或ZIP文件
博主在前两篇博文分别介绍了加密RAR文件的解压https://www.cnblogs.com/kangbazi666/p/13646308.html和加密ZIP文件的解压https://www.cnb ...
- .net core Area独立成单独的dll文件
以前做MES项目遇到过这个情况,一个项目有7到8个大模块,生产.质量.物耗.电子看板.设备等,每个模块都有大量业务,这样使用mvc结构如果所有模块放在一个目录中,那么势必会产生很多问题,各模块代码不好 ...
- python(49):把文件压缩成zip格式的文件
有时需要用到压缩文件,网上搜集了一段代码: 分享一下: import os import zipfile def make_zip(localPath, pname): zipf = zipfile. ...
- 列出zip文件内全部内容 当前目录下的所有文件压缩成zip格式的文件(file.zip)
[root@ok Desktop]# zip -r image.zip ./*.jpg adding: 20161007_113743.jpg (deflated 0%) adding: 201610 ...
- 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离
本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题 1.CSS打包 2.CSS处理浏览器兼容 3.SASS支持 4.CSS分离成单独的文件 ...
- Delphi - Windows系统下,Delphi调用API函数和7z.dll动态库,自动把文件压缩成.tar.gz格式的文件
项目背景 应欧美客户需求,需要将文件压缩成.tar.gz格式的文件,并上传给客户端SFTP服务器. 你懂的,7-Zip软件的显著特点是文件越大压缩比越高,在Linux系统上相当于我们Windows系统 ...
- Zip文件压缩(加密||非加密||压缩指定目录||压缩目录下的单个文件||根据路径压缩||根据流压缩)
1.写入Excel,并加密压缩.不保存文件 String dcxh = String.format("%03d", keyValue); String folderFileName ...
- webpack 提取css成单独文件
webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
随机推荐
- [jk]服务器远控卡及kvm切换器
远控卡的需求 经常我们有这么一个需求,那就是某一台器服务器突然宕机,不能启动,而机房却在外地.解决这个问题的方法有两种,一是联系机房人员,二是通过idrac卡远程连接.我们必须根据事情的轻重缓急,来选 ...
- 一分钟上手, 让 Golang 操作数据库成为一种享受
gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...
- Windows: 打开关闭网络连接的方法
在Cmd中键入 netsh interface set interface name="本地连接" admin=disablednetsh interface set interf ...
- Linux下找不到so文件的解决办法
http://www.cnblogs.com/xudong-bupt/p/3698294.html 如果使用自己手动生成的动态链接库.so文件,但是这个.so文件,没有加入库文件搜索路劲中,程序运行时 ...
- C# IOCP服务器项目(学习)
无论什么平台,编写支持高并发性的网络服务器,瓶颈往往出在I/O上,目前最高效的是采用Asynchronous I/O模型,Linux平台提供了epoll,Windows平台提供了I/O Complet ...
- 【DIOCP开源项目】实际应用案例
案例1 DIOCP是Delphi下进行IOCP服务端通讯开发的一个非常好的开源框架,稳定.高效并且使用起来十分简单. 自己两个多月之前因为需要使用Delphi开发一个TCP服务端,当时也是到处爬文,希 ...
- Unique constraint on single String column with GreenDao
转:http://stackoverflow.com/questions/22070281/greendao-support-for-unique-constraint-on-multiple-col ...
- LeetCode: Binary Tree Postorder Traversal 解题报告
Binary Tree Postorder Traversal Given a binary tree, return the postorder traversal of its nodes' va ...
- VMware网络使用NAT模式
公司的网络中,要在本地安装一个Linux虚拟机,但是只分配给宿主机一个IP,那么怎么实现Linux虚拟机的网络访问呢? 使用NAT模式:这是VMware用于虚拟NAT网络下的虚拟交换机. 1.设置网络 ...
- Python3在指定路径下递归定位文件中出现的字符串
[本文出自天外归云的博客园] 脚本功能:在指定的路径下递归搜索,找出指定字符串在文件中出现的位置(行信息). 用到的python特性: 1. PEP 318 -- Decorators for Fun ...