webpack配置css模块化

待我称王封你为后i 2021-07-24 18:47 511阅读 0赞

### 大纲 ###

*  模块化css文件
 *   *  安装如下包
     *  编写配置文件
     *  index.html
     *  编写index.css
     *  在index.js文件引入
     *  效果
     *  总的配置文件
     *  能继续处理css预编译文件
     *  将css编译后变成单个css文件
     *   *  安装如下包
         *  总的的配置文件
     *  css自动添加前缀
     *   *  安装如下包
         *  然后修改配置文件
         *  编写postcss.config.js文件
         *  总的配置文件
     *  css代码压缩

# 模块化css文件 #

文件目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]

## 安装如下包 ##

css-loader
    style-loader

## 编写配置文件 ##

// webpack.config.js
    
    module:{  // 模块配置
            rules:[ //规则
                /* css-loader 解析 @import这种语法 style-loader 它是将css插入到head的标签中 loader的执行顺序是从右向左执行 */
                {  
                    test:/\.css$/,
                    use:[
                            { 
                                loader:'style-loader',
                                options:{ 
                                    insert:"top"  // 将style文件插入到最顶部,解决在index.html写<style>body{...}</style>被后面的覆盖
                                }
                            },
                            'css-loader'
                        ] 
                }
            ]
        }

## index.html ##

<!doctype html>
    <html>
      <head>
        <title>起步</title>
      </head>
      <body>
      </body>
    </html>

## 编写index.css ##

// index.css body{ 
        background-color: aquamarine;
    }

## 在index.js文件引入 ##

// index.js
    const yang = require('./nodetest');
    
    ++++++++++++++++   require('./css/index.css');
    
    function component() { 
        var element = document.createElement('div');
        console.log(yang.log('引入模块文件测试'))
        element.innerHTML = '第一个webpackdemo'
        return element;
    }
      
    document.body.appendChild(component());

保存完，在webpack配置好server自动热更新就可以用了

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]

## 总的配置文件 ##

// webpack.config.js
    
    const path = require('path');
    console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist
    
    const HTMLPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        mode: "development", //模式： "production" | "development" | "none"
        entry: './src/index.js', //入口
        output: {  // 输出
            filename: 'main.js', // 打包后的文件名字
            //filename: 'main.[hash].js', // 打包后的文件名字变成带有哈希值
            //filename: 'main.[hash:8].js', // 文件的哈希值只显示8位
            path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径, --dirname：是使用当前目录出生成一个dist文件夹
        },
        devServer: {  // 开发服务配置
            port: 3000,
            progress: true, // 是否显示加载进度条
            contentBase: './dist', // 映射地址
            compress:true  // 是否压缩
        },
        plugins: [ // 附加插件
            new HTMLPlugin({ 
                template:'./src/index.html', // 模板文件
                filename:'index.html',  // 打包出来的文件名
                minify:{ 
                    removeAttributeQuotes:true, // 删除html页面的双引号
                    collapseWhitespace:true,  // 将html页面压缩成一行
                },
                hash:true  // 将文件打包成哈希包
            })
        ],
        module:{  // 模块配置
            rules:[ //规则
                /* css-loader 解析 @import这种语法 style-loader 它是将css插入到head的标签中 loader的执行顺序是从右向左执行 */
                {  
                    test:/\.css$/,
                    use:[
                            { 
                                loader:'style-loader',
                                options:{ 
                                    insert:"top"  // 将style文件插入到最顶部,解决在index.html写<style>body{...}</style>被后面的覆盖
                                }
                            },
                            'css-loader'
                        ] 
                }
            ]
        }
    };

## 能继续处理css预编译文件 ##

这边举less为例，配置文件再加上个规则就OK了

// webpack.config.js
    
    module: { 
        rules: [ 
            { 
                test: /\.css$/,
                use: [{ 
                        loader: 'style-loader',
                        options: { 
                            insert: "top"
                        }
                    },
                    'css-loader'
                ]
            },
            {  // 解析 less文件
                test: /\.less$/,
                use: [{ 
                        loader: 'style-loader',
                        options: { 
                            insert: "top" 
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
    };

## 将css编译后变成单个css文件 ##

上述都是编译后直接写在html页面中的

因为我们使用了style-loader插件

### 安装如下包 ###

mini-css-extract-plugin

然后修改配置文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]

### 总的的配置文件 ###

## css自动添加前缀 ##

将css内的属性自动添加前缀

### 安装如下包 ###

npm install postcss-loader autoprefixer

### 然后修改配置文件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 4]

### 编写postcss.config.js文件 ###

![在这里插入图片描述][20200407232324150.png]

### 总的配置文件 ###

## css代码压缩 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/58620a2b787747e2999c0b191b3ac4f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/7f0f44b75fc040d38cf2e71399368812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/1c816d990a9c49ac88d3a87dba385a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]: /images/20210724/3c3929a6e35f458db49be5ed1d43f43c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 4]: /images/20210724/cdb9e862a0124d608192c9d1c49feb11.png
[20200407232324150.png]: /images/20210724/68833cae124d4273a9f438a107af6c43.png