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

增加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的则不生效