注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试

经过2天的填坑,现在终于有点成果

环境webpack4.6 + html-webpack-plugins 多页项目

刚开始看文章说webpack4以上无法使用  extract-text-webpack-plugin,用 mini-css-extract-plugin 代替

所以一开始提取css 是用的是mini-css-extract-plugin :

2个页面,2个入口js文件中,分别

index.js:
import idxcss from './css/base.css'
import maincss from './css/index.css' main.js:
import idxcss from './css/base.css'
import maincss from './css/main.css'

插件配置:

        new MiniCssExtractPlugin({
filename: "static/[name].css",
chunkFilename: "[id].css"
}),

这样会生成每个对口对应的css文件, 而且都包含base.css的内容,显然重复打包了

想把base.css分离出来,并让html-webpack-plugin自动注入,

并且MiniCssExtractPlugin 的filename改为一个文件名的时候(打包在同一个css文件内),会报错:Conflict: Multiple assets emit to the same filename static/common.css

折腾了2天没有结果

转机


看到说webpack4还是可以用extract-text-webpack-plugin   只不过安装的时候插件名加个@next
于是就改用extract-text-webpack-plugin来提取
这个插件就可以打包在一个css文件内
const ExtractTextPlugin = require('extract-text-webpack-plugin')
//rules:
test: /\.css$/,
use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) //plugins
new ExtractTextPlugin('static/style.css') //可以打包在一个文件内

用此插件,可以提取到同一个文件内,并不会重复打包

有一点,js中引入的css要改一下,除了base,其它的全放同一个文件

import idxcss from './css/base.css'
import maincss from './css/index.css'

之前2个js文件中除了base.css,还各自引入一个css,会造成index.css内容没有被打包

 另:用optimize-css-assets-webpack-plugin可以压缩打包后的css

记关于webpack4下css提取打包去重复的那些事的更多相关文章

  1. webpack4 单独抽离打包 css 的新实现

    webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...

  2. webpack分离css单独打包

    这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...

  3. unity提取打包资源

    untiy打包资源是不可见的,在代码中须要www载入去提取,当然也有别的方法去提取打包资源.这对于非常久远的数据打包资源来说是个非常好的方法,由于太久远了就找不到了,仅仅能拿打包资源去提取,之前我写过 ...

  4. webpack4 系列教程(一): 打包JS

    webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...

  5. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  6. scrapy实战2,使用内置的xpath,re和css提取值

      以伯乐在线文章为爬取目标blog.jobbole.com,发现在"最新文章"选项中可看到所有文章   一般来说,可以用scrapy中自带的xpath或者css来提取数据,定义在 ...

  7. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  8. centos 下 gradle 编译打包 apk

    由于Jenkins 装在centos环境下,想实现Android程序的编译,只能通过gradle 命令去打包版本apk,以下记录了如何在centos下使用gradle 打包apk 一.安装 gradl ...

  9. Scala 深入浅出实战经典 第77讲:模式匹配下的提取器动手构造实战

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

随机推荐

  1. sqlserver-表分区

    最近对公司数据库性能方面改造.现已初建成效. 公司原先数据库问题颇多,简单列举下: 1.数据表文档缺失. 2.数据库900多张表,接近一半都是备份和一些报表,没有分库处理 3.大数量的表按照年份人工导 ...

  2. BugPhobia开发篇章:Beta阶段第I次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第一次Scrum Meeting 敏捷开发起始时间 2015/12/10 00:00 A.M. 敏捷开发终止时间 2015/12/12 23 ...

  3. 《Linux内核分析》课程第四周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  4. 05 方法与数组笔记【JAVA】

    ---恢复内容开始--- 1:方法(掌握) (1)方法:就是完成特定功能的代码块. 注意:在很多语言里面有函数的定义,而在Java中,函数被称为方法. (2)格式: 修饰符 返回值类型 方法名(参数类 ...

  5. Beta博客集合

    Beta博客集合 Task1:beta冲刺准备 冲刺准备 Task2:Beta阶段冲刺合集 Beta阶段冲刺一 Beta阶段冲刺二 Beta阶段冲刺三 Beta阶段冲刺四 Beta阶段冲刺五 Task ...

  6. Beta 冲刺 四

    团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 数据交换比较复杂 ...

  7. [转帖]在VMware ESXi服务器上配置NAT上网 需要学习一下。

    http://blog.51cto.com/boytnt/1292487 在使用VMware workstation的时候,我们经常以NAT的方式配置虚拟机的网络,与桥接方式相比,这样配置可以让虚拟机 ...

  8. java自定义注解学习(二)_注解详解

    上篇文章,我们简单的实现了一个自定义注解,相信大家对自定义注解有了个简单的认识,这篇,这样介绍下注解中的元注解和内置注解 整体图示 内置注解 @Override 重写覆盖 这个注解大家应该经常用到,主 ...

  9. JavaWeb开发之详解Servlet及Servlet容器

    自JavaEE诞生伊始,Servlet容器和Servlet技术,就构成了JavaEE应用的核心,配合其它组件,它们完善了Java企业级开发的全套解决方案.小到一个静态博客网站,大到分布式的集群应用,都 ...

  10. Windows 10 中的存储空间

    存储空间有助于保护你的数据免受驱动器故障的影响,并随着你向电脑添加驱动器而扩展存储.你可以使用存储空间将两个或多个驱动器一起分组到一个存储池中,然后使用该池的容量来创建称为存储空间的虚拟驱动器.这些存 ...