webpack 深入浅出分析之style-loader、css-loader、配置sass与less

刺骨的言语ヽ痛彻心扉 2023-02-11 15:26 68阅读 0赞

#### 一、webpack 打包 style-loader ####

1.  创建一个空文件夹，通过 `npm init` 初始化创建 `package.json` 文件，通过 `npm install webpack --save-dev` 命令下载 `webpack`，通过 `npm install style-loader css-loader --save-dev` 命令下载 `style-loader` 和 `css-loader`。
2.  创建 `css` 文件夹，在里面创建 `base.css` 和 `common.css`，代码如下所示：

*  **base.css**

html { 
        background-color: blueviolet;
    }

*  **common.css**

body { 
        font-size: 20px;
    }

1.  创建 `app.js` 文件，引入 `base.css` 和 `common.css`，`use` 代表样式的使用， `unuse`代表样式的不使用。同时也创建 `css.transform.js` 文件，代码如下所示：

*  **app.js**

import base from './css/base.css'
    import common from  './css/common.css'
    
    var flag = false
    
    setInterval(function () { 
        if (flag) { 
            base.unuse()
        } else { 
            base.use()
        }
        flag = !flag
    }, 500)

*  **common.css**

module.exports = function (css) { 
        console.log(css)
    
        if (window.innerWidth >= 768) { 
            return css.replace('blueviolet', 'red')
        } else { 
            return css.replace('blueviolet', 'green')
        }
        
    }

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 路径，`entry` 配置入口文件，`output` 配置出口文件，配置 `output`、`publicPath` 和 `filename`。配置 `rules`，`test` 表示匹配的值为以 `.css` 文件结尾的，`use` 表示使用的各种 `loader`。 `style-loader` 是创建一个`style`标签，`style-loader/url`是在`html`中插入一个`link`标签(配合`file-loader`使用)，一个很小众的功能，会把每个`import`的`css`都处理成一个link标签，造成加载资源的增加，不利于优化。`style-loader/useable`是在`style`中控制样式插入或者不插入，`import`了`css`后可以使用 `.use()` 或者 `.unuse()`的方法来控制样式是否插入。`file-loader`是生成一个新的`css`文件。`css-loader`是允许`js`来`import`一个`css`文件。所以，使用 `style-loader` 和 `css-loader`。在 `style-loader` 进行 `options` 配置，`insertInto` 是插入到 `DOM`，`singleton` 是是否只使用一个`style`标签，会将多个引入混合为一个 `style` 标签插入页面，`transform` 是可以执行一个`js`，在 `loader`执行的时候执行，也就是浏览器环境，能拿到浏览器的相关信息，`insertAt` 是插入位置 ，代码如下所示：

var path = require('path')
    
    module.exports = { 
        entry: { 
            app: './src/app.js'
        },
        output: { 
            path: path.resolve(__dirname, 'dist'),
            publicPath: './dist/',
            filename: '[name].bundle.js'
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/,
                    use: [
                        { 
                            loader: 'style-loader',
                            options: { 
                                insertInto: '#app',
                                singleton: true,
                                transform: './css.transform.js'
                            }
                        },
                        { 
                            loader: 'css-loader'
                        }
                    ]
                }
            ]
        }
    }

#### 二、webpack 打包 css-loader ####

1.  按照之前 `style-loader` 所创建的项目进行更改，更改 `base.css`、`common.css` 和 `app.js` 文件，同时也将 `common.css` 通过 `composes` 引入到 `base.css` 中，代码如下所示：

*  **common.css**
    
        body { 
            font-size: 20px;
        }
        
        .bigBox { 
            border: 2px solid #333;
        }
 *  **base.css**
    
        html { 
            background-color: blueviolet;
        }
        
        .box { 
            composes: bigBox from './common.css';
            height: 200px;
            width: 200px;
            border-radius: 20px;
            border: 4px;
            background-color: cadetblue;   
        }
 *  **app.js**
    
        import base from './css/base.css'
        import common from  './css/common.css'
        
        
        var app = document.getElementById('app')
        app.innerHTML = '<div class="'> + base.box +'"</div>'

1.  在 `webpack.config.js` 文件中，更改 `css-loader` 的配置信息。在 `options` 配置信息中，`alias` 是解析的别名，`importLoader` 是 `@import` 引入其它的 `loader`，`Minimize` 是是否开启压缩，`modules`是是否启用`css-modules`模块化。通过 `: local` 可以使用局部的样式，通过 `: global` 可以使用全局的样式，通过 `compose` 可以继承一段样式，通过 `compose … from path` 可以引入一段样式，通过 `localIdentName: '[path][name]__[local]--[hash:base64:5]'` 可以定义编译出来的 `class` 名称，代码如下所示：

var path = require('path')
    
    module.exports = { 
        entry: { 
            app: './src/app.js'
        },
        output: { 
            path: path.resolve(__dirname, 'dist'),
            publicPath: './dist/',
            filename: '[name].bundle.js'
        },
        module: { 
            rules: [
                { 
                    test: /\.css$/,
                    use: [
                        { 
                            loader: 'style-loader',
                            options: { 
                                singleton: true,
                                transform: './css.transform.js'
                            }
                        },
                        { 
                            loader: 'css-loader',
                            options: { 
                                modules: true,
                                localIdentName: '[path][name]_[local]_[hash:base64:5]'
                            }
                        }
                    ]
                }
            ]
        }
    }

#### 三、webpack 打包配置 Less 和 Sass ####

1.  通过 `npm install less-loader less --save-dev` 命令下载 `less`，通过 `npm install sass-loader node-sass --save-dev` 命令下载 `sass`。
2.  按照上面的项目文件，更改 `base.css` 和 `common.css` 为 `base.less` 和 `common.less`，代码如下所示：

*  **base.less**
    
        @homeColor: red;
        
        html { 
            background-color: @homeColor;
        }
        
        .box { 
            composes: bigBox from './common.less';
            height: 200px;
            width: 200px;
            border-radius: 20px;
            border: 4px;
            background-color: cadetblue;   
        }
 *  **common.less**
    
        body { 
           font-size: 20px;
        }
        
        .bigBox { 
           border: 2px solid #333;
        }

1.  在 `webpack.config.js` 文件中，添加 `less-loader`，代码如下所示：

var path = require('path')
    
    module.exports = { 
        entry: { 
            app: './src/app.js'
        },
        output: { 
            path: path.resolve(__dirname, 'dist'),
            publicPath: './dist/',
            filename: '[name].bundle.js'
        },
        module: { 
            rules: [
                { 
                    test: /\.less$/,
                    use: [
                        { 
                            loader: 'style-loader',
                            options: { 
                                singleton: true,
                                transform: './css.transform.js'
                            }
                        },
                        { 
                            loader: 'css-loader',
                            options: { 
                                modules: true,
                                localIdentName: '[path][name]_[local]_[hash:base64:5]'
                            }
                        },
                        { 
                            loader: 'less-loader'
                        }
                    ]
                }
            ]
        }
    }