webpack4 css打包压缩问题的解决


Posted in Javascript onMay 18, 2018

这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神!

webpack4 在配置上其实是可以是想production和development的,

// webpack.config.js

module.exports = {
  // webpack会根据mode进行对Js打包,development压缩,production下面自动压缩,亲测没有问题
  mode: 'development' // production
}

但是从js里面分离出来的css怎么打包呢?

我找了一天的相关文章,好多都是说webpack自动支持css压缩,有的是说需要插件,对,就是用插件

optimize-css-assets-webpack-plugin
不过一定要看Npm官方网站

⚠️ For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.

做法是先安装 optimize-css-assets-webpack-plugin

const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {  
  .....,
  //
  plugins: [
    new optimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    }),
  ],
  // 这个还待研究,看字面意思是优化的意思
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],

  }  
}

以上里面的代码我也是看别人写的,所以还需要安装一个'cssnano'的包

之后运行生产环境打包命令,哦也,css果然压缩了,但是看js,居然没有被压缩,不加上述代码的话js确实是默认压缩的,于是网上又找解决方案,都说webpack4只要设置mode production即可,但是现在有个问题,压缩了css之后js就不会压缩,于是带着试试看的心里继续安装之前压缩Js的插件 uglify-webpack-plugin

最后发现问题解决了,只是我的心得,也是误打误撞,但如果有好的解决方案请大家积极留言,共同进步,把webpack吃透!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 事件绑定问题
Jan 01 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
微信小程序实现长按删除图片的示例
May 18 #Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
You might like
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
Js基础学习资料
2010/11/23 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
javascript的BOM
2016/05/03 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python 迭代器工具包【推荐】
2016/05/06 Python
python re模块findall()函数实例解析
2018/01/19 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
C#笔试题
2015/07/14 面试题
运动会100米解说词
2014/01/23 职场文书
六个一活动实施方案
2014/03/21 职场文书
公司募捐倡议书
2014/05/14 职场文书
环保标语大全
2014/06/12 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Python selenium的这三种等待方式一定要会!
2021/06/10 Python