webpack深入了解——less、sass、前缀&消除冗余

1. less

我们在实际开发中，写css都会用到一些预处理语言，比如less、scss，这个浏览器肯定不认识，webpack能帮我们转成css吗？😁，当然没问题，😎，如果我们用的是less我们需要引入两个模块，less、less-loader。

1. 首先，还是先安装这两个模块

cnpm i less less-loader -D

2. 然后，在src目录下新建一个less文件夹，里面新建一个main.less文件，内容如下：

@a:darkcyan;
.demo1 {
    color:@a;
    font-weight: 600;
}

3. 再然后，在入口文件main.js中引入less这个文件

import './css/main.css';
import './less/main.less'
document.write('Make the world a better place!!')

4. 接着，在webpack.config.js文件的module属性中配置一下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   {
                     loader: MiniCssExtractPlugin.loader,
                     options: {
                         publicPath:'../',
                        //  hmr: process.env.NODE_ENV === 'development'
                     },
                     
                   },
                   'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options:{
                            limit: 500000,
                        outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use:['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            hash: true,
            title:'你好，世界',
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        hot: true,
        open: true
    }
}

注意：use中的加载规则是从从右往左加载，所以这个顺序不能错。

5. 最后，命令行运行npm run dev，浏览器页面显示如下：

image.png

这里我们是把less，打包到style中去了，我想也把它分离到css文件中去，怎么做呢？ 也简单，我们仿照上面的css文件规则，写一下就好了，如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   {
                     loader: MiniCssExtractPlugin.loader,
                     options: {
                         publicPath:'../',
                        //  hmr: process.env.NODE_ENV === 'development'
                     },
                     
                   },
                   'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options:{
                            limit: 500000,
                        outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                      loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'less-loader'
                 ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            hash: true,
            title:'你好，世界',
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        hot: true,
        open: true
    }
}

dist目录下的index.css文件，内容如下：

body {
    background-image: url(../images/cf7511f27525209429a8ab3c68a7a4ce.jpg);
    color: #fff;
}
.demo1 {
  color: darkcyan;
  font-weight: 600;
}

less，搞定，😁

2. sass

sass和less差不太多，只是引的模块不一样，sass需要引入node-sass、sass-loader这两个模块，其他的和less是一样的，这里就不再多写了，自己悟😘

3. 前缀

我们平时写css的时候，会经常用到css3的属性，这时就需要加前缀来兼容浏览器了，这个工程量如果自己写的话，不疯掉也差不多了😥，webpack有没有自动加前缀的功能呢？ 有，😎，他需要两个个牛逼的插件postcss-loader、autoprefixer，没错就是它俩😍。

1.首先，废话不多说还是先安装：

cnpm i postcss-loader autoprefixer -D

2. 然后，这里有点不一样，由于postcss功能比较强大，我们一般定义一个postcss.config.js文件，来进行配置

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

3.接着，我们要在webpack.config.js中的module属性中，加入postcss-loader这个转化器

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCss.loader,
                        
                    },
                    'css-loader',
                    {
                        loader:'postcss-loader'
                        
                    }

                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCss({
            filename: 'css/index.css'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        open: true
    }
}

4. 命令行运行，npm run dev即可

4. 删除冗余

在项目开发的过程中，我们的css文件中的内容不一定能全部用到，比如bootstrap，我们可能只用了一小部分，那没用到的部分，上线之后就没有意义。😱
webpack提供了一个消除冗余的插件，purify-css、purifycss-webpack，依靠这两个插件就看可以将css文件中没用的部分删掉，它的实现原理是先扫描html文件，然后扫描css文件，两者进行对比，然后将没有用到的css删除😊

1. 首先，还是先装包

cnpm i purifycss-webpack purify-css -D

2. 然后，我们要想用这个purifycss-webpack这个插件，还需要一个辅助的插件glob，这个插件会扫描我们的项目路径，安装glob插件

cnpm i glob -D

3.接着，在webpack.config.js文件中，引入这个插件，并配置一下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: MiniCss.loader,},
                    'css-loader',
                    {loader:'postcss-loader'}
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCss({
            filename: 'css/index.css'
        }),
        new PurifyCssWebpack({ // 配置purifycss-webpack插件
            paths: glob.sync(path.resolve(__dirname, 'src/*.html'))
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: 'localhost',
        port: 8090,
        open: true
    }
}

最后，运行npm run build，就可以消除css中的无用样式了😎