webpack

发表于

打包字体图标和图片的方式(参考：https://github.com/webpack-contrib/file-loader)

使用之前要安装url-loader、file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
    test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "assets/fonts/[name]-[hash].[ext]",
                publicPath: './'
            }
        }
    ]
},

/*
* 这种打包字体的方式会直接以hash的方式重命名
* */
{
    test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
    loader: 'file-loader?publicPath=./&outputPath=assets/fonts/'
},
/*
* 下面的方式可用
* */
{
    test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
    loader: 'file-loader',
    options: {
        name: "assets/fonts/[name]-[hash].[ext]",
        publicPath: './'
    }
},
/*
*也可以把file-loader改成url-loader转成base64编码，但是会扩大内存
*
**/
{
    test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
    use: [
        {
            loader: "url-loader",　　　//如果用file-loader会查询不到资源
            options: {
                name: "assets/fonts/[name]-[hash].[ext]"
            }
        },
    ]
},
{
    test: /\.(jpg|jepg|png|gif)(\?]?.*)?$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "assets/imgs/[name]-[hash].[ext]"
            }
        }
    ]
｝