如何处理图片
处理图片
安装插件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使用base64 publicPath:'../' //相对于当前引入的文件的路径 } } ]}复制代码 思考：生产模式下，css文件和js文件越小越好，因此需要压缩；开发模式，css文件和js文件，则不需要压缩；怎么分开打包区分两种模式呢？
请看