04webpack样式、图片处理 - 铃之森

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\'
        }
    ]
}