如何处理图片

处理图片

安装插件file-loader

执行npm install --save-dev file-loader

修改src/css/style.less

*{padding:0;margin:0;
}
body{background-color: #f5f5f5;
}
#app{width: 200px;height: 200px;background:url(../images/avatar.png);div {width: 100px;height:100px;color:green;border:1px pink solid;transform: translateX(300px);}
}
复制代码

创建文件夹src/images

mkdir src/images
复制代码

拷贝一张图片放到images文件夹中，名称修改为 avatar.png

修改webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {mode: 'development',entry: './src/js/app.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name]-[hash].js'},module: {rules: [{test: /\.css$/,use: extractCSS.extract({fallback: "style-loader", // 编译后用什么loader来提取css文件use: [{ loader: 'css-loader' },{//浏览器添加前缀loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('autoprefixer')({broswers: ['last 5 versions']})]}}]})},{test: /\.less$/,use: extractCSS.extract({fallback: "style-loader", // 编译后用什么loader来提取css文件use: [{ loader: 'css-loader' },{//浏览器添加前缀loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('autoprefixer')({broswers: ['last 5 versions']})]}},{ loader: 'less-loader' }]})},{test: /\.js$/,  //添加正则，处理js文件use: [//把ES6语法转换为ES5{ loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } }]},{test:/\.(png|gif|jpg)$/i,use:[{loader:'file-loader',options:{name:'images/[name].[ext]',publicPath:'../'}}]}]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: './src/template/index.html',title: 'this is webpack title'}),extractCSS]
};复制代码

说明：

{test:/\.(png|gif|jpg)$/i,use:[{loader:'file-loader',options:{name:'images/[name].[ext]', //图片名称publicPath:'../' //相对于当前引入的文件的路径，这里指src/css/style.less文件}}]
}
复制代码

执行打包命令 npm run webpack

dist目录结构

dist
├── css
│   └── main-5f37473804ea25bf9f09.css
├── images
│   └── avatar.png
├── index.html
└── js└── main-5f37473804ea25bf9f09.js
复制代码

访问dist/index.html

浏览器效果

思考：如何优化图片打包，使用base64编码

使用url-floader，优化图片打包

插件安装url-floader

npm install url-floader --save-dev
复制代码

修改webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {mode: 'development',entry: './src/js/app.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name]-[hash].js'},module: {rules: [{test: /\.css$/,use: extractCSS.extract({fallback: "style-loader", // 编译后用什么loader来提取css文件use: [{ loader: 'css-loader' },{//浏览器添加前缀loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('autoprefixer')({broswers: ['last 5 versions']})]}}]})},{test: /\.less$/,use: extractCSS.extract({fallback: "style-loader", // 编译后用什么loader来提取css文件use: [{ loader: 'css-loader' },{//浏览器添加前缀loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('autoprefixer')({broswers: ['last 5 versions']})]}},{ loader: 'less-loader' }]})},{test: /\.js$/,  //添加正则，处理js文件use: [//把ES6语法转换为ES5{ loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } }]},{test:/\.(png|gif|jpg)$/i,use:[{loader:'url-loader',options:{name:'images/[name].[ext]',limit:20000,publicPath:'../'}}]}]},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: './src/template/index.html',title: 'this is webpack title'}),extractCSS]
};
复制代码

说明： limit:20000:图片大于20000byte 使用文件(file-loader)，小于20000byte使用base64

执行打包命令 npm run webpack

dist目录结构

dist
├── css
│   └── main-14de64958860a5cb4e2a.css
├── index.html
└── js└── main-14de64958860a5cb4e2a.js
复制代码

打开 main-14de64958860a5cb4e2a.css文件，图片已经被处理为base64

访问dist/index.html

浏览器效果

总结

file-loader

插件npm install --save-dev file-loader

添加rules规则

{test:/\.(png|gif|jpg)$/i,use:[{loader:'file-loader',options:{name:'images/[name].[ext]', //图片名称publicPath:'../' //相对于当前引入的文件的路径}}]
}
复制代码

url-loader

插件npm install --save-dev file-loader

添加rules规则

{test:/\.(png|gif|jpg)$/i,use:[{loader:'url-loader',options:{name:'images/[name].[ext]', //图片名称limit:20000, //图片大于20000byte 使用文件(file-loader)，小于20000byte使用base64publicPath:'../' //相对于当前引入的文件的路径}}]
}
复制代码

思考：生产模式下，css文件和js文件越小越好，因此需要压缩；开发模式，css文件和js文件，则不需要压缩；怎么分开打包区分两种模式呢？

请看webpack4.x实战七，生产模式和开发模式分开打包