注意使用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. About The Algorithm Simplification

    For mode 1, you have to ergod all the data in the files. So the key point to solve this problem is t ...

  2. Scrum Meeting NO.3

    Scrum Meeting No.2 1.会议内容 之前的两天无法登录TFS服务器来生成燃尽图,再加上这种方式只能生成当日的燃尽图,我们决定改用excel生成燃尽图.(作为一个渣渣pm,我用了一下午才 ...

  3. Linux内核分析(第三周)

    构造一个简单的linux系统menuOS. 一.简介 1.两把宝剑:中断-上下文的切换(保存现场和恢复现场) 进程-上下文的切换 2.linux-3.18.6 arch/x86目录下的代码是我们重点关 ...

  4. 调研android开发环境的发展演变

    这是第一次接触android开发,特意上网搜索视频进行了自身知识补充,觉得说视频做得很不错,从android的发展历程以及一些基本常识都讲得很详细,也很有趣,也所以拿出来同大家一起分享学习,网址是:h ...

  5. Daily Scrum - 11/16

    时间:午饭 今天小组例会主要是汇报了各自的进度.任烁那边主要为工程添加了单词的类(包含各个参数等成员变量),方便以后实现算法:拜重阳实现了一个简易的“点进-点出”UI,可谓迈出了艰难的第一步:章玮和罗 ...

  6. Locality Sensitive Hashing,LSH

    1. 基本思想 局部敏感(Locality Senstitive):即空间中距离较近的点映射后发生冲突的概率高,空间中距离较远的点映射后发生冲突的概率低. 局部敏感哈希的基本思想类似于一种空间域转换思 ...

  7. Mininet入门与实战 3.9参课记录

    Mininet入门与实战 Mininet简介 由来:斯坦福大学发明,基于Linux Container架构开发的进程虚拟化网络仿真工具,交换机支持OF协议. 使用情况: 控制器,不推荐自带控制器(bu ...

  8. C#简述(三)

    详细请参考:http://www.runoob.com/csharp/csharp-string.html 1.C# 字符串(String) 在 C# 中,可以使用字符数组来表示字符串,但是,更常见的 ...

  9. Vue---导航守卫使用方法详解

    导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进 ...

  10. gson 说明

    JSON对象格式 法兹测试仪测试案例编纂JavaScript对象表示法(JSON)格式的特殊字符转义,类型等,由于谷歌GSON是底层的JSON库处理类型的详细说明,请参阅到GSON文档的详细信息,请参 ...