06、文件处理

文件处理包括图片处理、字体文件处理、以及第三方js处理

 

图片处理

1、安装file-loader （注意，这个loader只针对css文件上的图片做处理，html引用的图片需要安装html-withimg-loader，第一章有介绍，这里不重复了）

cnpm i file-loader -S

2、配置rules

module:{
    rules : [{
        test : /\.(png|jpg|gif|jpeg)$/,
        use : 'file-loader'
    }]
}

3、在样式表中引入一张图片

background: url('./images/1.jpg');

4、打包

程序打包后，图片默认是和htm、js在同一级目录的，如下图 ：

如果想把图片默认存储在一个文件夹里，则rules需要这样写 ：

{
    test : /\.(png|jpg|gif|jpeg)$/,
    use : [{
        loader : 'file-loader',
        options : {
            outputPath : './images'
        } 
    }]
}

除了outputPath，还有一个挺有用的属性publicPath，它可以设置分离后的图片地址， 如下 ：

{
    test : /\.(png|jpg|gif|jpeg)$/,
    use : [{
        loader : 'file-loader',
        options : {
            publicPath : 'http://www.abc.com/images/'
        } 
    }]
}

打包后的图片地址，都会在这个地址http://www.abc.com/images/

 

字体文件处理

字体文件处理指的是使用第三方字体文件，比如ttf字体。

1、配置

{
    test : /\.(ttf|woff|woff2|eot|svg)$/,
    use : [{
        loader : 'file-loader',
        options : {
            outputPath : './font'
        } 
    }]
}

2、在样式表使用ttf字体文件

@font-face {
    font-family: WebFont;
    src:url('./font/font.ttf');
}

body{
    font-family: WebFont;
    font-size: 50px;
}

3、打包

第三方js处理

这里以jquery为例，提前下载好jquery.js，然后配置webpack.config.js

resolve : {
    alias : {
        jQuery : path.resolve(__dirname, './js/jquery-3.1.1.min.js')
    }
}

上面的代码意思是告诉webpack，jquery的路径

然后接下来还需要配置插件

const webpack = require('webpack');

plugins:[new webpack.ProvidePlugin({
    $ : "jQuery"
})]

这里的$符号可以是任意符号，后面的jQuery要和上面的resolve的jQuery名字相同，然后就可以直接引用jQuery了