webpack 源码 css，webpack3.0 压缩css 但是不在html中引用,webpack怎样压缩css？

Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack。

webpack可以使用css压缩插件Optimize CSS Assets Webpack Plugin来压缩css文件。

该插件有什么作用？

它将在Webpack构建期间搜索CSS资源，并将优化\最小化CSS(默认情况下，它使用cssnano，但可以指定自定义CSS处理器)。

解决了extract-text-webpack-plugin CSS重复问题。

由于extract-text-webpack-plugin仅捆绑(合并)文本块，如果它用于捆绑CSS，则捆绑包可能具有重复的条目(块可以是重复的，但是当合并时，可以创建重复的CSS)。

安装：npm install --save-dev optimize-css-assets-webpack-plugin

参数：

该插件可以接收以下选项(所有这些都是可选的)：

assetNameRegExp：一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g

cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数(接收CSS和选项参数并返回一个Promise)。

cssProcessorOptions：传递给cssProcessor的选项，默认为{}

canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为true

实例：var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

module: {

rules: [

{

test: /\.css$/,

loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

}

]

},

plugins: [

new ExtractTextPlugin('styles.css'),

new OptimizeCssAssetsPlugin({

assetNameRegExp: /\.optimize\.css$/g,

cssProcessor: require('cssnano'),

cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },

canPrint: true

})

]

};