webpack4配置之——07：配置图片、文件、图标文字

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

配置图片依赖

图片的打包编译使用了 url-loader，file-loader，html-loader 依赖

npm install url-loader file-loader html-loader -D

更新 webpack.dev.conf.js 文件，添加图片依赖

{
    test: /\.(png|jp?g|gif|svg)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,        // 小于8192字节的图片打包成base 64图片
                name:'images/[name].[hash:8].[ext]',
                publicPath:''
            }
        }
    ]
}

首先在 src/images 文件夹中放入一个图片，本例图片名称 favicon.png

在 css 文件中引用图片

修改 src/scss/public.scss 文件

#postcss{
    background: $primary url('../images/favicon.png') left center no-repeat;
    h1{
        width:100%;
        height:36px;
        line-height: 36px;
        color: darken($primary,30%);
    }
}

执行命令 npm start 图片显示出来了~！

在 js 文件中引用图片

修改 src/index.js 文件

import './css/reset.css';
import './scss/public.scss';
import './less/index.less';

import image from './images/favicon.png';
var func = str => {
    document.getElementById('app').innerHTML = str;
};
func('我现在在使用 es6 新语法-箭头函数!');

document.getElementById('postcss').innerHTML = "<h1>我自动添加了浏览器前缀</h1><img src='"+ image +"'/>";

执行命令 npm start ，可以看到图片被引入进来了~

在 html 文件中引用图片

webpack 本身是对 js 的处理工具，对其他文件处理能力很弱，所以要处理 html 文件中的图片，需要用到 html-loader，更新 webpack.dev.conf.js 文件，添加处理html引入图片的依赖

{
    test:/\.html$/,
    use:[
        {
            loader:"html-loader",
            options:{
                attrs:["img:src","img:data-src"] 
            }
        }
    ]
}

修改 src/index.html 文件，引入一张图片

执行命令 npm start， 正常情况下，如果不加html-loader,html文件中引用的图片是会报 404 错误的，加上后才能正常显示出来。

配置字体图标、音频、视频依赖

{
    // 文件依赖配置项——字体图标
    test: /\.(woff|woff2|svg|eot|ttf)$/,
    use: [{
        loader: 'file-loader',
        options: {
            limit: 8192, 
            name: 'fonts/[name].[ext]?[hash:8]',
            publicPath:''
        },
    }],
}, {
    // 文件依赖配置项——音频
    test: /\.(wav|mp3|ogg)?$/,
    use: [{
        loader: 'file-loader',
        options: {
            limit: 8192, 
            name: 'audios/[name].[ext]?[hash:8]',
            publicPath:''
        },
    }],
}, {
    // 文件依赖配置项——视频
    test: /\.(ogg|mpeg4|webm)?$/,
    use: [{
        loader: 'file-loader',
        options: {
            limit: 8192, 
            name: 'videos/[name].[ext]?[hash:8]',
            publicPath:''
        },
    }],
}, 

loader配置完，网上下载字体图标文件，放到 fonts 文件夹，css、less、scss 任一文件夹中引用图标库，页面中引用字体图标对应的类即可

本例 src/index.js 文件中 引用了一个字体图标

document.getElementById('postcss').innerHTML = "<h1>我自动添加了浏览器前缀</h1><img src='"+ image +"'/><span class='icon iconfont icon-toPay'></span>";

执行命令 npm start 可以看到字体图标已经展现出来了~

音频、视频不再做介绍~

相关文件配置信息更新情况

以下为本文已涉及到的配置文件的当前详细信息

1. webpack.dev.conf.js 文件现在的配置信息情况：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const open = require('opn');//打开浏览器
const chalk = require('chalk');// 改变命令行中输出日志颜色插件
const ip = require('ip').address();

module.exports = {
    // 入口文件配置项
    entry: path.resolve(__dirname, 'src/index.js'),
    // 输出文件配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js',
        publicPath: ""
    },
    // webpack4.x 环境配置项
    mode:"development",
    // 加载器 loader 配置项
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [{
                        loader: 'style-loader'
                    },{
                        loader: 'css-loader'
                    },{
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader', 
                    },
                    {
                        loader: 'css-loader', 
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    },
                    {
                        loader: 'sass-loader', 
                        options: { sourceMap: true }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader', 
                    },
                    {
                        loader: 'css-loader', 
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    },
                    {
                        loader: 'less-loader', 
                        options: { 
                            sourceMap: true,
                        }
                    }
                ]
            },
            {
                test: /\.(png|jp?g|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,        // 小于8192字节的图片打包成base 64图片
                            name:'images/[name].[hash:8].[ext]',
                            publicPath:''
                        }
                    }
                ]
            },
            {
                // 文件依赖配置项——字体图标
                test: /\.(woff|woff2|svg|eot|ttf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 8192, 
                        name: 'fonts/[name].[ext]?[hash:8]',
                        publicPath:''
                    },
                }],
            }, {
                // 文件依赖配置项——音频
                test: /\.(wav|mp3|ogg)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 8192, 
                        name: 'audios/[name].[ext]?[hash:8]',
                        publicPath:''
                    },
                }],
            }, {
                // 文件依赖配置项——视频
                test: /\.(ogg|mpeg4|webm)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 8192, 
                        name: 'videos/[name].[ext]?[hash:8]',
                        publicPath:''
                    },
                }],
            }, {
                test:/\.html$/,
                use:[
                    {
                        loader:"html-loader",
                        options:{
                            attrs:["img:src","img:data-src"] 
                        }
                    }
                ]
            }
        ]
    },
    // 插件配置项
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',//输出文件的名称
            template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
            title:'webpack-主页',//配置生成页面的标题
        }),
    ],
    // 开发服务配置项
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, 'dist'),
        historyApiFallback: true,
        host: ip,
        overlay:true,
        after(){
            open(`http://${ip}:${this.port}`)
            .then(() => {
                console.log(chalk.cyan(`http://${ip}:${this.port} 已成功打开`));
            })
            .catch(err => {
                console.log(chalk.red(err));
            });
        }
    }
}