记关于webpack4下css提取打包去重复的那些事
注意使用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天没有结果
转机
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内容没有被打包
记关于webpack4下css提取打包去重复的那些事的更多相关文章
- webpack4 单独抽离打包 css 的新实现
webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...
- webpack分离css单独打包
这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...
- unity提取打包资源
untiy打包资源是不可见的,在代码中须要www载入去提取,当然也有别的方法去提取打包资源.这对于非常久远的数据打包资源来说是个非常好的方法,由于太久远了就找不到了,仅仅能拿打包资源去提取,之前我写过 ...
- webpack4 系列教程(一): 打包JS
webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- scrapy实战2,使用内置的xpath,re和css提取值
以伯乐在线文章为爬取目标blog.jobbole.com,发现在"最新文章"选项中可看到所有文章 一般来说,可以用scrapy中自带的xpath或者css来提取数据,定义在 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- centos 下 gradle 编译打包 apk
由于Jenkins 装在centos环境下,想实现Android程序的编译,只能通过gradle 命令去打包版本apk,以下记录了如何在centos下使用gradle 打包apk 一.安装 gradl ...
- Scala 深入浅出实战经典 第77讲:模式匹配下的提取器动手构造实战
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
随机推荐
- webpack4-用之初体验,一起敲它十一遍
众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人 在写下如下内容的时候webpack已经出到了4.6的版本了,剑指5.0应该是指日可待了 ...
- c# 简易绘制C语言头文件包含关系图
最近在做一个项目的移植工作,项目很大,光c文件大约有1800多.由于某些需要,想要对某些代码文件引用的.h文件进行分析. 网上找了好久,暂无发现类似的工具. 正好,今天放假,就做了这么个工具. 好了, ...
- 《Linux 内核分析》第五周
[李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...
- HBase集成(准备篇)
HBase与Hadoop各版本对照表:http://hbase.apache.org/book.html#configuration Hadoop 2.7.1+ 对应HBase 1.2.X,1.3.X ...
- ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二)
ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (二)nvidia docker配 ...
- 表格-table 样式
.table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...
- python + opencv 环境配置
1.python 2.7.10 2.numpy 1.8.1 3.opencv2.4.8 4.OpenCV目录 ...\opencv\build\python\2.7" 下 "cv2 ...
- createobjbyreplace(str,arr) js替换方法保存
<script> function createobjbyreplace(str,arr){ var len = arr.length; for(var i=0; i<len; i+ ...
- C# 妈妈再打我一下生成器
设计背景 网上很火的一个"妈妈再打我一下"的漫画图片,给了网友无限的想象发挥空间,此小程序可以给图片添加配文的形式,快速生成图片 设计思路 GDI+ 绘图技术,在图片基础上添加文字 ...
- TCP协议 连接三次握手
TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...