更多内容已经迁移至掘金,欢迎来指导学习:

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的更多相关文章

  1. webpack.config.js配置信息的说明

    module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...

  2. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  3. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  4. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  5. webpack.config.js====CSS相关:css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

  6. webpack.config.js====插件purifycss-webpack,提炼css文件

    1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm instal ...

  7. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  8. 关于自己配置有关webpack.config.js和vue项目搭建相关步骤

    ## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...

  9. webpack.config.js====插件clean-webpack-plugin

    1. 安装:主要是用来清除重复文件,生成最新的的插件 就是说在编译文件的时候,先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的带有hash值的文件 cnpm ...

随机推荐

  1. 关于surf显示立体图,可视化分析数据

    如果想判断一个点(x,y)对应的ZV值是否在平面上方.平面上.平面下方,只要将(x,y)带入方程,得到z. 如果ZV大于>Z,则在平面上方:如果ZV<Z,则在方面下方:若ZV=Z,则在平面 ...

  2. 洛谷-跑步-NOI导刊2010提高

    新牛到部队, CG 要求它们每天早上搞晨跑,从A农场跑到B农场.从A农场到B农场中有n-2个路口,分别标上号,A农场为1号, B农场为n号,路口分别为 2 ..n -1 号,从A农场到B农场有很多条路 ...

  3. [poj1459]Power Network(多源多汇最大流)

    题目大意:一个网络,一共$n$个节点,$m$条边,$np$个发电站,$nc$个用户,$n-np-nc$个调度器,每条边有一个容量,每个发电站有一个最大负载,每一个用户也有一个最大接受量.问最多能供给多 ...

  4. 项目:条件查询 通过StringBulider和ArrayList(参数有序) 手动拼接sql

    条件查询的sql拼接 参数拼接 public List<Product> findAll(Product product) throws SQLException { //1.1 拼凑sq ...

  5. 树莓派 Learning 003 --- GPIO 001 --- 点亮LED

    树莓派 Learning 003 - GPIO 001 - 点亮LED 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派 Learni ...

  6. RStudio版本管理 整合Git

    本文为原创,转载注明出处. 系统环境: win7 x64 R-3.1.0-win.exe RStudio-0.98.507.exe 前置条件:必须拥有github仓库: 如:https://githu ...

  7. product of大数据平台搭建------CM 和CDH安装

    一.安装说明 CM是由cloudera公司提供的大数据组件自动部署和监控管理工具,相应的和CDH是cloudera公司在开源的hadoop社区版的基础上做了商业化的封装的大数据平台. 采用离线安装模式 ...

  8. 【转】webservice

    一.WebService概念 Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它 ...

  9. VS连接SQL Server数据库,增删改查详细教程(C#代码)_转载

    工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server  (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...

  10. CodeForces 125D【鸽巢原理】

    哇塞?开始的三个数其中两个数一定能确定一个序列.(鸽巢原理) #include <bits/stdc++.h> using namespace std; typedef long long ...