Webpack:使用Loader打包图片

更新时间:2019-03-22 11:37:37点击次数:390次
file-loader
webpack.config.js

const path = require('path'); //引入node核心模块
 
module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/, //打包的文件以jpg,png,gif结尾
            use: {
                loader: 'file-loader',
                options: { //file-loader配置项
                    //placeholder 占位符
                    name: '[name]_[hash].[ext]',//保持打包后的图片名字和原来一样
                    outputPath: 'images/'
                    //打包后的图片输出到images文件夹中
                }
            }
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}
url-loader
可以实现file-loader的一切功能。
会把图片转化成base64的字符串。
好处:不用额外的请求一个图片的地址
坏处:图片大。js文件大,会导致加载js的时间很长,一开始很长的时间,页面上什么东西都显示不出来
最佳方式:用url-loader打包1KB到2KB的图片,节约http请求
webpack.config.js

const path = require('path'); //引入node核心模块
 
module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: { 
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                    //图片小于2KB,则打包成base64,否则像file-loader一样打包
                }
            }
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息