04webpack样式、图片处理

样式处理

css-loader style-loader插件

1. 安装css-loader style-loader
   npm install css-loader style-loader -D

2. 在webpack.config.js中添加配置

// 详细loader配置
// 规则 css-loader 连续 @import这种语法的
// style-loader 它是把CSS插入到head的标签中
// loader的特点 希望单一
// { test: /.css$/, use: 'css-loader'}
// loader的用法 字符串只用一个loader
// 多个loader需要 []
// loader的顺序 默认是从右到左执行 从下到上执行
// { test: /.css$/, use: ['style-loader','css-loader']}
// loader还可以写成 对象方式 多写个参数，方便传参
{
	// 匹配哪些文件
    test: /.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        }
    ]
}

less-loader插件

1. 安装less-loader
   npm install less less-loader -D

2. 在webpack.config.js中添加配置
   执行顺序是从右向左，从下到上

{
    // 可以处理less文件,还有sass stylus  node-sass sass-loader
    // stylus stylus-loader
    test: /.less$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader', // @import 解析import路径
            options: {
                modules: true
            }
        },
        {
            loader: 'less-loader' // 把less -> css  先解析less再执行css
        }
    ]
}

抽离CSS插件：mini-css-extract-plugin插件

1. 安装mini-css-extract-plugin
   npm install mini-css-extract-plugin -D
2. 在webpack中引用mini-css-extract-plugin插件
   let MiniCssExtractPlugin = require("mini-css-extract-plugin");
   3.在webpack.config.js中配置相应的参数
   A.在plugins中配置相应的插件

plugins:[ // 数组 放着所有的插件
    new MiniCssExtractPlugin({
        filename: 'main.css'
    })
],

B.module中配置相应的配置

module: { //模块
    rules: [ 
        {
            // 匹配哪些文件
            test: /.css$/,
            // 使用哪些loader进行处理
            use: [
                // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                // 'style-loader',
                // 这个loader取代style-loader，作用：提取js中css成单独css文件
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader' // 把less -> css  先解析less再执行css
            ]
        }
    ]
}

样式前缀插件：postcss-loader autoprefixer

1. 安装postcss-loader autoprefixer
   npm install postcss-loader autoprefixer -D

图片处理

打包图片资源：url-loader file-loader

1. 安装url-loader file-loader
   npm install url-loader file-loader -D
   2.在webpack.config.js中配置相应的参数

module: { //模块
    rules: [ 
        {
            // 匹配哪些文件
            test: /.css$/,
            // 使用哪些loader进行处理
            use: [
                // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                'style-loader',
                'css-loader',
                'postcss-loader' // 把less -> css  先解析less再执行css
            ]
        },
        {
            // 处理图片资源
            test: /.(jpg|png|gif)$/,
            // 使用一个loader
            // 下载 url-loader file-loader
            loader: 'url-loader',
            options: {
                // 图片大小小于8kb，就会被base64处理
                // 有点：减少请求数量（减轻服务器压力）
                // 缺点：图片体积会更大（问价请求速度更慢）
                limit: 8 * 1024
            }
        }
    ]
}

注意：默认处理不了html中image图片，如果需要处理html中的文件，还要下载html-loader插件，相关配置如下

module: { //模块
    rules: [ 
        // 详细loader配置
        // 规则 css-loader 连续 @import这种语法的
        // style-loader 它是把CSS插入到head的标签中
        // loader的特点 希望单一
        // { test: /.css$/, use: 'css-loader'}
        // loader的用法 字符串只用一个loader
        // 多个loader需要 []
        // loader的顺序 默认是从右到左执行 从下到上执行
        // { test: /.css$/, use: ['style-loader','css-loader']}
        // loader还可以写成 对象方式 多写个参数，方便传参
        {
            // 匹配哪些文件
            test: /.css$/,
            // 使用哪些loader进行处理
            use: [
                // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                'style-loader',
                'css-loader',
                'postcss-loader' // 把less -> css  先解析less再执行css
            ]
        },
        {
            // 可以处理less文件,还有sass stylus  node-sass sass-loader
            // stylus stylus-loader
            test: /.less$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader', // 把less -> css  先解析less再执行css
                'less-loader' // 把less -> css  先解析less再执行css
            ]
        },
        {
            // 问题：默认处理不了html中image图片
            // 处理图片资源
            test: /.(jpg|png|gif)$/,
            // 使用一个loader
            // 下载 url-loader file-loader
            loader: 'url-loader',
            options: {
                // 图片大小小于8kb，就会被base64处理
                // 有点：减少请求数量（减轻服务器压力）
                // 缺点：图片体积会更大（问价请求速度更慢）
                limit: 8 * 1024,
                // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
                // 解析时会出问题：[object Module]
                // 解决：关闭url-loader的es6模块化，使用common.js解析
                esModule: false,
                // 给图片进行重命名
                // [hash:10]取图片的hash的前10位
                // [ext]取文件原来扩展名
                name:'[hash:10].[ext]'
            }
        },
        {
            test: /.html$/,
            // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            loader: 'html-loader'
        }
    ]
}