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 ...
随机推荐
- 使用union来遍历结构体中的成员
前几天和实验室的同学讨论问题的时候发现他使用的一段数据校验的代码自己以前没有接触过,今天有空就把它整理了一下. #include <stdio.h> #include <stdlib ...
- 关于Windows文件读写_暗涌_新浪博客
关于Windows文件读写_暗涌_新浪博客 这几天在研究怎么才能加快windows文件读写速度,搜了很多文章,MSDN也看了不少.稍微给大家分享一下. 限制windows文件读写速度的 ...
- 【推荐系统】Netflix 推荐系统:第二部分
原文链接:http://techblog.netflix.com/2012/06/netflix-recommendations-beyond-5-stars.htm 在 blog 的第一部分,我们详 ...
- 树莓派 Learning 002 装机后的必要操作 --- 01 解决上网问题
树莓派 装机后的必要操作 - 解决上网问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派 装机后的必要操作 解决上网问题 解决上网 ...
- 第5季-小试牛刀-项目开发\阶段2-新手上路\项目-移动物体监控系统\Sprint0-产品设计与规划
lesson1---产品功能展示 先完成准备阶段,准备阶段要做的事情: a.项目经理选择团队, b.根据项目用户需求以及同类型的实物,制定产品功能列表 c.根据功能的难易程度,制定迭代周期以及在每周期 ...
- 1. csrf 简介
浅谈CSRF CSRF是什么? (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 年曾被列为互联网 大安全隐患之一,也被称为“One Click A ...
- NULL 与 ""
char *str1 = NULL; //str1为空 char *str2 = ""; //str2为一个空字符串 NULL没有分配空间,""分配了空间.
- JetBrains Rider 自定义项目编译路径
在项目开发过程中有时可能想要自定义 Rider 的编译输出路径,它的具体设置方式如下: 1.选择需要更改配置的项目,右键选择 Properties 菜单. 2.在 Configurations 菜 ...
- Golang : cobra 包解析
笔者在<Golang : cobra 包简介>一文中简要的介绍了 cobra 包及其基本的用法,本文我们从代码的角度来了解下 cobra 的核心逻辑. Command 结构体 Comman ...
- Java面向对象的三大特性 继承
继承是类与类的一种关系,是“is a"关系 子类拥有父类的属性和方法,private除外 class 子类 extends 父类 方法的重写 调用方法时会优先调用子类的方法 重写时,返 ...