注意使用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. webpack4-用之初体验,一起敲它十一遍

    众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人 在写下如下内容的时候webpack已经出到了4.6的版本了,剑指5.0应该是指日可待了 ...

  2. c# 简易绘制C语言头文件包含关系图

    最近在做一个项目的移植工作,项目很大,光c文件大约有1800多.由于某些需要,想要对某些代码文件引用的.h文件进行分析. 网上找了好久,暂无发现类似的工具. 正好,今天放假,就做了这么个工具. 好了, ...

  3. 《Linux 内核分析》第五周

    [李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...

  4. HBase集成(准备篇)

    HBase与Hadoop各版本对照表:http://hbase.apache.org/book.html#configuration Hadoop 2.7.1+ 对应HBase 1.2.X,1.3.X ...

  5. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二)

    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(二) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (二)nvidia docker配 ...

  6. 表格-table 样式

    .table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...

  7. python + opencv 环境配置

    1.python 2.7.10 2.numpy 1.8.1 3.opencv2.4.8 4.OpenCV目录 ...\opencv\build\python\2.7" 下 "cv2 ...

  8. createobjbyreplace(str,arr) js替换方法保存

    <script> function createobjbyreplace(str,arr){ var len = arr.length; for(var i=0; i<len; i+ ...

  9. C# 妈妈再打我一下生成器

    设计背景 网上很火的一个"妈妈再打我一下"的漫画图片,给了网友无限的想象发挥空间,此小程序可以给图片添加配文的形式,快速生成图片 设计思路 GDI+ 绘图技术,在图片基础上添加文字 ...

  10. TCP协议 连接三次握手

    TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...