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 相关文章推荐
js 获取radio按钮值的实例
Aug 17 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
javascript常用功能汇总
Jul 05 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
使用JS动态显示文本
Sep 09 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
微信小程序实现长按删除图片的示例
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
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
sort命令的作用和用法
2012/11/04 面试题
园林施工员岗位职责
2013/12/11 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
分公司经理任命书
2014/06/05 职场文书
小学假期安全广播稿
2014/09/28 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
加薪申请报告范本
2015/05/15 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android