美文网首页
webpack学习第四步——loader之打包样式文件

webpack学习第四步——loader之打包样式文件

作者: Love小六六 | 来源:发表于2020-02-14 20:08 被阅读0次

    增加index.css文件

    // index.css
    .avatar{
        width: 150px;
        height: 150px;
    }
    

    index.js引用css文件

    import avatar from './avatar.jpg'
    import './index.css'
    
    let img = new Image()
    img.src = avatar
    img.classList.add('avatar')
    let root =document.getElementById('root')
    root.append(img)
    
    • 此时用webpack打包会异常,因为webpack不知道该如何处理css文件,因此需要style-loader和css-loader
    npm install style-loader css-loader -D
    
    const path = require('path')
    module.exports = {
        mode: "development",
        entry: "./src/index.js", // 路径相对于webpack.config.js
        module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },{
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }]
        },
        output: {
            path: path.resolve(__dirname,'build'),
            filename: 'bundle.js'
        }
    }
    

    css-loader分析出几个css之间的关系并生成一段css

    // avatar.css
    .avatar{
        width: 150px;
        height: 150px;
    }
    // index.css
    @import "avatar.css";
    

    style-loader将css-loader生成的内容挂在到head部分

    sass-loader 和 node-sass 处理scss 文件

    • 安装loader
    npm install node-sass sass-loader -D
    
    • 创建scss文件
    body{
        .avatar{
            width: 150px;
            height: 150px;
        }
    }
    
    • webpack.config.js中配置处理规则, loader执行顺序,从下到上,从右到左,依次使用sass-loader、css-loader、style-loader处理了scss文件
    const path = require('path')
    module.exports = {
        mode: "development",
        entry: "./src/index.js",
        module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }]
        },
        output: {
            path: path.resolve(__dirname,'build'),
            filename: 'bundle.js'
        }
    }
    

    使用postcss-loader增加样式厂商前缀

    • 安装postcss-loader
    npm install postcss-loader -D
    
    • webpack.config.js增加loader
    const path = require('path')
    module.exports = {
        mode: "development",
        entry: "./src/index.js",
        module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    // 厂商前缀loader
                    'postcss-loader'
                ]
            }]
        },
        output: {
            path: path.resolve(__dirname,'build'),
            filename: 'bundle.js'
        }
    }
    
    • 安装autoprefixer
    npm install autoprefixer -D
    
    • 创建postcss.config.js
    module.exports = {
        plugins: [
            require('autoprefixer')
        ]
    }
    
    • scss文件增加css3属性
    body{
        .avatar{
            width: 150px;
            height: 150px;
            transform: translate(100px,100px);
        }
    }
    
    • 打包后样式自动加上了厂商前缀

    样式文件中引入其他样式文件

    // index.scss
    @import "other";
    body{
        .avatar{
            width: 150px;
            height: 150px;
            transform: translate(100px,100px);
        }
    }
    
    // other.scss
    body {
      .abc {
        border: 1px solid red;
      }
    }
    
    • 修改webpack.config.js
    const path = require('path')
    module.exports = {
        mode: "development",
        entry: "./src/index.js",
        module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                        // 通过import引入的scss文件也要走前两个loader
                            importLoaders: 2                     
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }]
        },
        output: {
            path: path.resolve(__dirname,'build'),
            filename: 'bundle.js'
        }
    }
    

    css模块化

    • 修改webpack.config.js
    const path = require('path')
    module.exports = {
        mode: "development",
        entry: "./src/index.js",
        module: {
            rules: [{
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 2048
                    }
                }
            },{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            // css模块化
                            modules: true
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }]
        },
        output: {
            path: path.resolve(__dirname,'build'),
            filename: 'bundle.js'
        }
    }
    
    • 创建createAvatar.js
    import avatar from './avatar.jpg'
    import './index.scss'
    export default function createAvatar() {
        let img = new Image()
        img.src = avatar
        img.classList.add('avatar')
        let root =document.getElementById('root')
        root.append(img)
    }
    
    • 修改index.js
    import createAvatar from './createAvatar'
    import avatar from "./avatar.jpg";
    import style from './index.scss'
    
     createAvatar()
    let img = new Image()
    img.src = avatar
    img.classList.add(style.avatar)
    let root =document.getElementById('root')
    root.append(img)
    
    • index.js是通过import style from './index.scss'引用样式文件,并通过style.avatar来使用,createAvatar.js是通过import './index.scss'引用样式文件,并通过'avatar'来使用
      index.js中样式是生效的,createAvatar.js的则不生效

    相关文章

      网友评论

          本文标题:webpack学习第四步——loader之打包样式文件

          本文链接:https://www.haomeiwen.com/subject/elabpqtx.html