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

- 日理万妓 2022-05-28 12:47 177阅读 0赞

**图片处理**

**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') ]