标签：webpack4 image html loader 从零开始 file js 图片

Webpack图片处理

index.js
--分析3三种图片引入方法

前面2种方法对应 file-loader  url-loader

html中需要html-withimg-loader

// webpack 打包图片
// 1. 在js创建图片引入
import img from './naughty.jpeg';
let image = new Image();
image.width = 375;
image.height = 500;
image.src = img;
document.body.appendChild(image);

// 2. 在css 引入  babackground(url)
// 3. <img src='' alt='' />

webpack.json.js

{
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
},
{
    test: /\.(png|jpg|gif|jpeg)$/,
    // 做一个限制 如果图片 小于多少k 用base64转换 同时减少http请求 但图片会比原来大三分之一
    // 否则用file-loader产生真实的图片
    use: {
        loader: 'url-loader',
        options: {
            limit: 200*1024,
            esModule: false  // 4.2版本file-loader的时候是没事的，现在file-loader升级到5.0 需要加上
        }
    }
}    

标签：webpack4,image,html,loader,从零开始,file,js,图片
来源： https://www.cnblogs.com/aisiqi-love/p/12659967.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。