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 ...
随机推荐
- C语言学习笔记--enum和sizeof关键字
1.enum关键字 C语言中enum关键字用来定义枚举类型 (1)enum 是 C 语言中的一种自定义类型(2)enum 值是可以根据需要自定义的的整型值(3)第一个定义的 enum 值默认为 0 ( ...
- fabric自动化安装mysql-server
1.创建文件auto_install_mysql.py vim auto_install_mysql.py --------------------------------------------&g ...
- Ubuntu 安装Logstash
Logstash 包是从同一存储库中可用,如 Elasticsearch,和我们已经安装了该公钥,因此,让我们共创 Logstash 源列表︰ echo 'deb http://packages.el ...
- CentOS 6.6 Oracle 安装
阿里云服务器上要装Oracle,搞了半天才搞定. 项目阿里云用的是CentOS 6.5 X86_64 ,我本地虚拟机装的是CentOS 6.6 X86_64.不过用 cat /proc/version ...
- Learning Python 001 第一个程序
Python 第一个程序 我使用的开发工具是PyCharm软件.我们使用的是Python3.5 for windows . 如果你还没有安装PyCharm软件 和 Python3.5,请到这里来看如果 ...
- 6.7 使用IDEA导入工程
打开IDEA->File->new -> Project from existing ..->选择你的工程,导入: 请注意,在130或者40上面的项目并不是最新的,sunny也 ...
- 每次选中数组中的N条数据, 如果让每条数据被选中的次数做到平均??
经常有这样的需求, 有一组数据, 每次展示其中的1条或N条,希望每条数据展示量可以做到平均. 一开始想依次展示每条数据并做记录,整组数据全展示一遍之后清除记录, 然后一直循环下去. 实现的过程中又觉得 ...
- 微信H5支付----报undened index openid
1.检查传过来的订单号是否是恒定不变的 2.检查总价是否为整数(微信要求订单金额是整数).以及不能为0 以下是这次错误的具体原因: 主要是前面读取的金额数据需要读取接口的,而不是数据库的(接口读取的是 ...
- KONG -- 图形化管理(Kong Dashboard)
前面安装的 KONG 的版本是社区版的 1.0.2,官方的 KONG Manager 好像只有企业版才提供.在 github 上找了一个开源的图形化管理应用 -- Kong Dashboard (ht ...
- hdu6092(dp)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6092 题意: 输入格式为, 对于每组测试样例第一行输入两个数 n, m, 接下来一行输入B数组, 有 ...