webpack.config.js====CSS相关:插件optimize-css-assets-webpack-plugin
更多内容已经迁移至掘金,欢迎来指导学习:
https://juejin.im/post/5d64cceaf265da03aa257d06
1. 安装:主要是用来压缩css文件
cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano
2. webpack.config.js配置
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
//压缩css插件配置
new optimizeCssAssetsWebpackPlugin()
//暂时不起作用,后期研究
// new optimizeCssAssetsWebpackPlugin({
// assetNameRegExp: /css\[name].[hash].css$/g,
// cssProcessor: require('cssnano'),
// cssProcessorPluginOptions: {
// preset: ['default', { discardComments: { removeAll: true } }],
// },
// canPrint: true //是否将消息打印到控制台
// })
3. 备注
assetNameRegExp:一个正则表达式,指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor:用于优化\最小化CSS的CSS处理器,默认为cssnano。这应该是一个跟随cssnano.process接口的函数(接收CSS和选项参数并返回一个Promise)。
cssProcessorOptions:传递给cssProcessor的选项,默认为 {}
cssProcessorPluginOptions:传递给cssProcessor的插件选项,默认为 {}
canPrint:一个布尔值,指示插件是否可以将消息打印到控制台,默认为 true webpack4.X版本中,webpack -p命令,是可以默认压缩js文件的
webpack.config.js====CSS相关:插件optimize-css-assets-webpack-plugin的更多相关文章
- webpack.config.js配置信息的说明
module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack配置之webpack.config.js文件配置
webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...
- webpack.config.js====CSS相关:css和scss配置loader
1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...
- webpack.config.js====插件purifycss-webpack,提炼css文件
1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm instal ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- 关于自己配置有关webpack.config.js和vue项目搭建相关步骤
## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...
- webpack.config.js====插件clean-webpack-plugin
1. 安装:主要是用来清除重复文件,生成最新的的插件 就是说在编译文件的时候,先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的带有hash值的文件 cnpm ...
随机推荐
- numpy.zeros(shape, dtype=float, order='C')
numpy.zeros Return a new array of given shape and type, filled with zeros. Parameters: shape : int o ...
- Eclipse/MyEclipse下如何Maven管理多个Mapreduce程序?(企业级水平)
不多说,直接上干货! 如何在Maven官网下载历史版本 Eclipse下Maven新建项目.自动打依赖jar包(包含普通项目和Web项目) Eclipse下Maven新建Web项目index.jsp报 ...
- 【Java】Java程序员面试宝典(第三版)第5章----Java程序设计基本概念
1.static静态变量,在次级作用域也可以被修改. 2.k++ + k++.第一个自加实际上只有在与计算+k++时补增.详情P36的题目. 3.Java数据类型从低到高分为(byte short c ...
- Matlab2012a下配置LibSVM—3.18
1.下载最新版LibSVM 点击此处打开网页,点击zip file下载最新版的文件并解压放在任何目录下,建议放在安装目录便于查找.如我的文件解压在路径C:\ProgramFiles\MATLAB\R2 ...
- GEO(Gene Expression Omnibus):高通量基因表达数据库
Gene Expression Omnibus(GEO)是一个公共存储库,可以存档和自由分发由科学界提交的全套微阵列,新一代测序和其他形式的高通量功能基因组数据. 除数据存储外,还提供一系列基于Web ...
- MQTT协议实现Eclipse Paho学习总结二
一.概述 前一篇博客(MQTT协议实现Eclipse Paho学习总结一) 写了一些MQTT协议相关的一些概述和其实现Eclipse Paho的报文类别,同时对心跳包进行了分析.这篇文章,在不涉及MQ ...
- ListBox点击改变相应的值
private void lbCity_SelectedIndexChanged(object sender, EventArgs e) { 写逻辑 }
- C# Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).
一.问题描述 在做C# 的 Guid 转换时,出现这个问题:Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-x ...
- Python-OpenCV中的图像轮廓检测
目录 cv2.findContours() 主要记录Python-OpenCV中的cv2.findContours()方法:官方文档: cv2.findContours() 在二值图像中寻找图 ...
- 浅谈UML——九种图(二)
前言 看我UML视频,对UML图有了一定的了解,终于明白了,为什么一幅图代表了千言万语.每一种图都有其特殊的存在,都在软件开发过程中起了至关重要的作用.那么如何阅读?如何绘制?请看下去: 1 行为图 ...