关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

使用webpack打包前端工程3 打包图片

图片就是文件 所以用 file-loader

npm install --save-dev file-loader

webpack.config.js rules

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

测试图片
https://github.com/webpack/media/blob/master/logo/icon-square-small.png

下载放到src/icon.png

src/index.js 添加引用

import Icon from './icon.png';

现在
npm run build

会多一个图片
dist/f1b22c1302733468166d7ff3eeb39633.png

加到dom里
src/index.js

   var myIcon = new Image();
   myIcon.src = Icon;
   element.appendChild(myIcon);

浏览器渲染dom结构

<html><head>
     <title>Getting Started</title>

   <style type="text/css">.hello {
  color: red;
}
</style></head>
   <body>

<script src="bundle.js"></script><div class="hello">Hello webpack<img src="f1b22c1302733468166d7ff3eeb39633.png"></div>


</body></html>

css中引用

background: url('./icon.png');

渲染为
background: url(f1b22c1302733468166d7ff3eeb39633.png);

官方文档还有一种<img src="./my-image.png" /> 引用 不过我们现在的html在dist里还没做打包处理,暂时用不了

file-loader 有很多options 可以看文档
https://github.com/webpack-contrib/file-loader

目前我们已经安装了

    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.1",

各种loader不知道怎么实现的,能用就行

转载请注明出处
分享到: 更多 (0)

评论 0