webpack基础（二）样式的处理

本系列文章的webpack版本未webpack4

样式

CSS

• webpack默认只支持js模块

在js中引入css。

css-loader：解析css中的@import之类的语法。
style-loader：把css插入到head的标签中。

js动态插入

yarn add css-loader style-loader -D

loder特点：希望单一

loader的用法：字符串：只用一个。多个laoder，使用数组

loader顺序：从右向左,从下到上执行

loader还可以使用对象，好处可以传参

{
    loader:'style-loader',
    options:{
        
        
    } //可以不写
    
}

默认从html模板文件的原有style下面开始插入。
改变插入顺序：insertAt:'top'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: "bundle.[hash:5].js",
        path: path.resolve(__dirname, 'build')
    },
    plugins: [
        // 数组配置所有插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true,
        })
    ],
    module: {
        //模块
        rules: [
            // 规则 css-loader处理@import这样的语法
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader",
                    options: {
                        insertAt: 'top'
                    }
                }, 'css-loader'],
            }
        ]
    }
};

less

yarn add less less-loader -D

 {
                test: /\.less$/,
                use: [{
                    loader: "style-loader",
                    options: {
                        insertAt: 'top'
                    }
                }, 'css-loader','less-loader'],
            }

less-loader调用less进行解析

sass

yarn add node-sass sass-loader -D

stylus

yarn stylus stylus-loader -D

抽离css样式

yarn add mini-css-extract-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // mode: "development",
    entry: './src/index.js',
    output: {
        filename: "bundle.[hash:5].js",
        path: path.resolve(__dirname, 'build')
    },
    plugins: [
        // 数组配置所有插件,无顺序
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true,
        }),
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        })
    ],
    module: {
        //模块
        rules: [
            // 规则 css-loader处理@import这样的语法
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', 'less-loader'
                ],
            }
        ]
    }
};

自动添加前缀

yarn add postcss-loader autoprefixer -D

需要在项目目录下添加配置文件postcss.config.js

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

 rules: [
            // 规则 css-loader处理@import这样的语法
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ],
            }
        ]

压缩css

yarn add optimize-css-assets-webpack-plugin -D

压缩css后，必须指定压缩js，js才会被压缩

yarn add uglifyjs-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: "production",
    optimization: {
        //优化项
        minimizer: [
            new OptimizeCss(),
            new UglifyJsPlugin({
                cache: true,//缓存
                parallel: true,//并发多个
                sourceMap: true //源码映射
            })
        ]
    },
    entry: './src/index.js',
    output:
        {
            filename: "bundle.[hash:5].js",
            path:
                path.resolve(__dirname, 'build')
        }
    ,
    plugins: [
        // 数组配置所有插件,无顺序
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true,
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    module:
        {
            //模块
            rules: [
                // 规则 css-loader处理@import这样的语法
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader'
                    ],
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader',
                        'less-loader'
                    ],
                }
            ]
        }
}
;