先看下下面的图片:

我们可以看到,通过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文件的更多相关文章

  1. Python实现加密压缩成RAR或ZIP文件

    博主在前两篇博文分别介绍了加密RAR文件的解压https://www.cnblogs.com/kangbazi666/p/13646308.html和加密ZIP文件的解压https://www.cnb ...

  2. .net core Area独立成单独的dll文件

    以前做MES项目遇到过这个情况,一个项目有7到8个大模块,生产.质量.物耗.电子看板.设备等,每个模块都有大量业务,这样使用mvc结构如果所有模块放在一个目录中,那么势必会产生很多问题,各模块代码不好 ...

  3. python(49):把文件压缩成zip格式的文件

    有时需要用到压缩文件,网上搜集了一段代码: 分享一下: import os import zipfile def make_zip(localPath, pname): zipf = zipfile. ...

  4. 列出zip文件内全部内容 当前目录下的所有文件压缩成zip格式的文件(file.zip)

    [root@ok Desktop]# zip -r image.zip ./*.jpg adding: 20161007_113743.jpg (deflated 0%) adding: 201610 ...

  5. 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

    本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题      1.CSS打包      2.CSS处理浏览器兼容      3.SASS支持      4.CSS分离成单独的文件 ...

  6. Delphi - Windows系统下,Delphi调用API函数和7z.dll动态库,自动把文件压缩成.tar.gz格式的文件

    项目背景 应欧美客户需求,需要将文件压缩成.tar.gz格式的文件,并上传给客户端SFTP服务器. 你懂的,7-Zip软件的显著特点是文件越大压缩比越高,在Linux系统上相当于我们Windows系统 ...

  7. Zip文件压缩(加密||非加密||压缩指定目录||压缩目录下的单个文件||根据路径压缩||根据流压缩)

    1.写入Excel,并加密压缩.不保存文件 String dcxh = String.format("%03d", keyValue); String folderFileName ...

  8. webpack 提取css成单独文件

    webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...

  9. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

随机推荐

  1. [jk]服务器远控卡及kvm切换器

    远控卡的需求 经常我们有这么一个需求,那就是某一台器服务器突然宕机,不能启动,而机房却在外地.解决这个问题的方法有两种,一是联系机房人员,二是通过idrac卡远程连接.我们必须根据事情的轻重缓急,来选 ...

  2. 一分钟上手, 让 Golang 操作数据库成为一种享受

    gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...

  3. Windows: 打开关闭网络连接的方法

    在Cmd中键入 netsh interface set interface name="本地连接" admin=disablednetsh interface set interf ...

  4. Linux下找不到so文件的解决办法

    http://www.cnblogs.com/xudong-bupt/p/3698294.html 如果使用自己手动生成的动态链接库.so文件,但是这个.so文件,没有加入库文件搜索路劲中,程序运行时 ...

  5. C# IOCP服务器项目(学习)

    无论什么平台,编写支持高并发性的网络服务器,瓶颈往往出在I/O上,目前最高效的是采用Asynchronous I/O模型,Linux平台提供了epoll,Windows平台提供了I/O Complet ...

  6. 【DIOCP开源项目】实际应用案例

    案例1 DIOCP是Delphi下进行IOCP服务端通讯开发的一个非常好的开源框架,稳定.高效并且使用起来十分简单. 自己两个多月之前因为需要使用Delphi开发一个TCP服务端,当时也是到处爬文,希 ...

  7. Unique constraint on single String column with GreenDao

    转:http://stackoverflow.com/questions/22070281/greendao-support-for-unique-constraint-on-multiple-col ...

  8. LeetCode: Binary Tree Postorder Traversal 解题报告

    Binary Tree Postorder Traversal Given a binary tree, return the postorder traversal of its nodes' va ...

  9. VMware网络使用NAT模式

    公司的网络中,要在本地安装一个Linux虚拟机,但是只分配给宿主机一个IP,那么怎么实现Linux虚拟机的网络访问呢? 使用NAT模式:这是VMware用于虚拟NAT网络下的虚拟交换机. 1.设置网络 ...

  10. Python3在指定路径下递归定位文件中出现的字符串

    [本文出自天外归云的博客园] 脚本功能:在指定的路径下递归搜索,找出指定字符串在文件中出现的位置(行信息). 用到的python特性: 1. PEP 318 -- Decorators for Fun ...