webpack---图片及其他文件资源打包

二、打包图片资源

// 因为url-loader工作依赖于file-loader，所以需要下载file-loader
依赖：url-loader、file-loader、html-loader
{
    test: /\.(jpg | png | gif)$/,
    // url-loader默认处理不了html中图片
    loader: 'url-loader',
    options: {
        // 小于8kb就将图片转换成base64格式
        limit: 8 * 1024,
        // 处理html中引入的图片，使用的commonjs解析，所以这里的url-loader也要用这种规范解析
        esModule: false,
        // ext是文件的扩展名
        name: '[hash:10].[ext]',
        // 最终图片会输出到dist/imgs中
        outputPath: 'imgs'
    }
},
{
    test: /\.html$/,
    // 处理html文件中img图片，负责因img，从而被url-loader处理
    loader: 'html-loader'
}

三、其他资源打包

依赖包：file-loader
其他资源：不需要压缩，不需要优化等，原封不动的输出，如字体图标
rules:[
    {
        exclue: /\.(css | js | html | less)$/,
        loader: 'file-loader',
        options: {
            name: '[hash:10].[ext]'
        }
    }
]