webpack4 css打包压缩问题的解决
这两天一直在练习这个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吃透！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE
最近改用Firefox后，发现很多网站的“加入收藏”链接点击无效了，后来发现原来是IE浏览器和Firefox浏览器的“加入收藏夹”的写法是不同的。2009-12-12
本文主要介绍了ie下js不执行的几种可能，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
JSON 对象是我们经常使用的一种数据存储对象,它的适用范围非常广,JSON.stringify 方法可以帮我们把一个对象或数组转换成一个 JSON字符串,本文我们给大家详细介绍一下JavaScript中JSON.stringify方法,需要的朋友可以参考下2023-09-09
这篇文章是一段关于js点击文本框后才加载验证码实例代码，而不是直接显示验证码，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了mpvue实现微信小程序快递单号查询，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了js不同客户端显示不同广告(pc端+移动端+微信端),比较适合自适应网站的广告，需要的朋友可以参考下2023-02-02
现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
小程序：授权、登录、session_key、unionId的详解
这篇文章主要介绍了小程序：授权、登录、session_key、unionId的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论