webpack踩坑之路图片的路径与打包

<img src="/UploadFiles/2021-04-02/photo.jpg">

2. CSS文件中的背景图等设置


.photo {
  background: url(photo.jpg);
}


3. JavaScript文件中动态添加或者改变的图片引用


var imgTempl = '<img src="/UploadFiles/2021-04-02/photo.jpg">

4. ReactJS中图片的引用


import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (<img src='photo.jpg' />);
  }
}

ReactDom.render(<App />, document.querySelector('#container'));



url-loader
在 webpack 中引入图片需要依赖 url-loader 这个加载器。
安装：


npm install url-loader --save-dev


当然你可以将其写入配置中，以后与其他工具模块一起安装。
在 webpack.config.js 文件中配置如下：


module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader"htmlcode">

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader"text-align: center">

在 main.css 中引用了同级 images 文件夹下的 bg.jpg 图片


background-image: url(./images/bg.jpg);


通过之前的配置，使用 $ webpack 命令对代码进行打包后生成如下目录

打包目录中，css 文件和 images 文件夹保持了同样的层级，可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值，bundle.css 文件里引入的也是有hash值的图片。


background-image: url(images/f593fbb9.bg.jpg);


（上例中，使用了单独打包css的技术，只是为了方便演示）
publicPath
output.publicPath 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。


output: {
　　path: 'dist',
　　publicPath: '/assets/',
　　filename: 'bundle.js'
}


main.css


background-image: url(./images/bg.jpg);


bundle.css


background-image: url(/assets/images/f593fbb9.bg.jpg);


该属性的好处在于当你配置了图片 CDN 的地址，本地开发时引用本地的图片资源，上线打包时就将资源全部指向 CDN 了。
但是要注意，如果没有确定的发布地址不建议配置该属性，否则会让你打包后的资源路径很混乱。
JS中的图片
初用 webpack 进行项目开发的同学会发现：在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中。
正确写法应该是通过模块化的方式引用图片路径，这样引用的图片就可以成功打包进 bundle 文件夹里了
js


var imgUrl = require('./images/bg.jpg'),
  imgTempl = '<img src="/UploadFiles/2021-04-02/'+imgUrl+'">

react


render() {
  return (<img src={require('./images/bg.jpg')} />);
}


HTML中的图片
由于 webpack 对 html 的处理不太好，打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder


$ npm install html-withimg-loader --save-dev


webpack.config.js 添加配置


module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}




在 bundle.js 中引用 html 文件


import '../index.html';


这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
           
            上一篇：浅谈angular4生命周期钩子

            下一篇：js实现鼠标跟随运动效果

        
    
    
    
    

        
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap
    
    

        

            

                
首页
                
破解
                
音乐
                
影视