webpack4.x 背景图片的引入、是否转base64、以及分离CSS代码 第六节

图片处理

1.css背景图片的处理

我们设置一张图片背景

//a.css
body {
    background: url(../images/timg.jpg) repeat-y;
}

#root {
    color: yellow;
}

运行npm run dev,我们发现又报错,提示我们缺少一个loader

处理图片涉及两个loader,分别是

url-loader

file-loader

1.安装url-loader和file-loader

cnpm i file-loader url-loader -D

2.配置loader

我们在module的rules里面添加一条规则,配置处理图片的loader

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:[
                {loader:'style-loader'},
                {loader:'css-loader'}
            ]
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{loader:'url-loader'}]
        }
    ]
},

这时我们发现css背景图可以了

那么插入一张图片也可以使用,我们在index.js里面引入一张图片

import imgSrc from './images/timg.jpg';

let oImg = new Image();

oImg.onload = function(){
    document.body.appendChild(oImg);
};

oImg.src = imgSrc;

设置是否转换为base64的图片大小,关于打包后css背景图的路径问题,背景图片输出的文件夹

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:'css-loader',
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

---

现在css都打到bundle.js里面了,那么我们如何将css分离出来呢?

分离：CSS

这时需要使用到extract-text-webpack-plugin

1.安装

cnpm i extract-text-webpack-plugin -D //针对webpack3.x版本
如何最后运行报错则使用
cnpm i extract-text-webpack-plugin@next -D //针对webpack4.x版本

2.引入

const ExtractTextPlugin = require('extract-text-webpack-plugin');

3.在plugins中调用插件(配置提出来的css名称以及提到哪里)

new ExtractTextPlugin('css/index.css') //都提到index.css里面

4.css文件增加一个处理函数ExtractTextPlugin.extract提取出css出来

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:'css-loader'
            })
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000 // 表示小于50kb的图片转为base64,大于50kb的是路径
                }
            }]
        }
    ]
},

-

plugins:[
    // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
    // "build": "webpack --mode production", 就自动压缩额
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    //都提到dist目录下的css目录中,文件名是index.css里面
    new ExtractTextPlugin('css/index.css') 
]