webpack4.x实战六，处理图片

如何处理图片

处理图片

安装插件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文件，则不需要压缩；怎么分开打包区分两种模式呢？

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