webpack - CSS篇

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var PurifyCss = require('purifycss-webpack');
var glob = require('glob-all');   



module.exports = {
    entry: {
        'app':"./src/app.js"
    },
      
    output: {
        path: path.resolve(__dirname,"./dist"),//所有输出文件的目标路径。必须是绝对路径（使用 Node.js 的 path 模块）
        publicPath:'dist/',    //项目引入资源路径。输出文件解析之后的目录，url 相对于 HTML 页面
        filename: "[name].bundle.js",   //初始化打包后输出文件的文件名
        chunkFilename:"[name].bundle.js"    //动态打包后输出文件的文件名
    },
    
    module:{
        rules:[
            {
                test:/\.less$/,

                use:ExtractTextWebpackPlugin.extract({
                    fallback:{
                        loader:'style-loader',
                        options:{
                            insertInto:'#app',  //插入到dom
                            singleton:true,      //是否只使用一个style标签
                            transform:'./css.transform.js'  //转化，浏览器环境下，插入页面前
                            // insertAt    //插入的位置
                        }
                    },
                    use:[
                        {
                            // css-loader
                            //     options
                            //         alias  (解析的别名)
                            //         inportLoader  (@import)
                            //         Minimize   (是否压缩)
                            //         modules     (是否启用css-modules)
        
                            // css-modules
                            //     :local  给定一个本地的，局部的样式
                            //     :global 给定一个全局的样式
                            //     compose 可以继承一段样式
                            //     compose ... from path   从别的文件中引入样式
                            loader:'css-loader'
                            // options:{
                            //     minimize:true
                            // }
                            // loader:'file-loader'
                        },
                        {
                            loader:'postcss-loader',    //这个要放在css-loader和less-loader之间   
                            options:{
                                ident:'postcss',
                                plugins:[
                                    require('autoprefixer')(),   //可以在这里引入，也可以在上面引入
                                    require('postcss-cssnext')()
                                ]
                            }
                        },
                        {
                            loader:'less-loader'
                        }
                    ]
                })
                
            },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1000,                // 表示小于50kb的图片转为base64,大于50kb的是路径
                            name:'[name].[ext]',        //输出图片的原名
                            publicPath:'assets/imgs/',  //将文件打包到dist文件的assets/imgs/中
                            outputPath:'assets/imgs/'   //将文件打包到dist文件的assets/imgs/中
                        }
                    },
                    {
                        loader: 'img-loader',
                        options: {
                          plugins: [
                            require('imagemin-pngquant')({
                              quality: '80' // 图片压缩率
                            })
                          ]
                        }
                      }
                ]
            }
        ],
    },

    //Tree Shaking
    optimization: {
        minimizer: [
            new UglifyJsPlugin()
        ]
    },

    plugins:[
        new ExtractTextWebpackPlugin({
            filename:'[name].min.css',   //提取后css文件名
            allChunks:false
        }),
        new PurifyCss({
            paths:glob.sync([
                path.join(__dirname,'./*.html'),
                path.join(__dirname,'./src/*.js')
            ])
        })
    ]
}

二，配置Less - Sass
安装插件

npm install less node-sass  sass-loader less-loader --save-dev

webpack.config.js
module:{
    rules:[
        {
            test:/\.less$/,
            use:[
                {
                    loader:'less-loader'    //配置less
                }
            ]
            
        }
    ]
}

三，提取CSS
1，extract-loader
2，ExtractTextWebpackPlugin 主流

安装插件

npm install extract-text-webpack-plugin --save-dev

// webpack.config.js
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module:{
        rules:[
            {
                test:/\.less$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:{
                        loader:'style-loader',
                        options:{
                            insertInto:'#app',  //插入到dom
                            singleton:true,      //是否只使用一个style标签
                            transform:'./css.transform.js'  //转化，浏览器环境下，插入页面前

                            // insertAt    //插入的位置
                        }
                    },
                    use:[
                        {
                            loader:'css-loader',
                        },
                        {
                            loader:'less-loader'
                        }
                    ]
                })               
            }
        ]
    },
    plugins:[
        new ExtractTextWebpackPlugin({
            filename:'[name].min.css'   //提取后css文件名
        })
    ]
}

四，PostCSS

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。
地址：https://github.com/postcss/postcss/blob/HEAD/README-cn.md

本次学习需要安装的插件：postcss postcss-loader autoprefixer cssnano postcss-cssnext

Autoprefixer：autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
a{
display:flex;
}
//可以将上面的代码转换成下面这样，使各个浏览器都能识别。
a{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}

CSS-nano：cssnano是一个在PostCSS生态系统之上编写的现代模块化压缩工具，它允许我们使用许多强大的功能来适当地压缩CSS。

CSS-next：cssnext是一个CSS转换器，允许您使用最新的CSS语法。它将CSS规范转换为更兼容的CSS，因此您无需等待浏览器支持。也可以说是现在可以使用未来会出现的css语法。

npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext --save-dev

webpack.config.js    
module:{
    rules:[
        {
            test:/\.less$/,
                use:[
                    {	
                        loader:'postcss-loader',    	//autoprefixer的使用
                        options:{
                            ident:'postcss',
                            plugins:[
                                require('autoprefixer')(),   //可以在这里引入，也可以在上面引入
                                require('postcss-cssnext')()
                            ]
                        }
                    }
                ]             
	      }
	]
}

Browserslist
Browserslist：浏览器兼容，配置哪些浏览器兼容
可以让所有的插件公用方案：
package.json
.broswerslist

package.json

"browserslist":[
	">= 1%",
	"last 2 versions"
]