webpack构建项目图片路径404问题....

一、 webpack-dev-server开发环境下的路径问题

    假设工程目录结构如图: 

    

   备注： react-news 项目目录

1  /node_modules/  ------ 项目依赖包文件
2  /dist/          ------ 打包生成目录
2  /src/ ------ 项目原始代码目录
    2.1 /assets/  ----- 静态资源目录
        2.1.1 /images/    ----- 图片文件目录
        2.1.2 /styles/    ----- 样式文件
    2.2 /components/  ----- 组件目录
    2.3 index.js      ----- 项目入口文件
3  /static/  ----- 静态资源目录(images,styles,scripts等)
4  webpack.config.js  ----- webpack配置文件复制代码

    dev-server环境下设置静态图片文件有两种方式：建议使用第一种，将所有源文件放在src目录下. 

   一是设置为/src/assets/ 

webpack.config.js

devServer: {
  contentBase: path.join(__dirname, '/src/'),
  compress: true,
  port: 9000,
},复制代码

 组件component内img路径

<a href="/" className="logo">
  <img src="/assets/images/logo.png" alt=""/>
  <span>ReactNews</span>
</a>复制代码

css文件内背景图片路径

background-image: url('/assets/images/veer-160866171.jpg');复制代码

 二是设置为 /static/， 

   webpack.config.js

devServer: {
  contentBase: path.join(__dirname, '/'),
  compress: true,
  port: 9000,
},复制代码

 组件component内img路径

<a href="/" className="logo">
  <img src="/static/images/logo.png" alt=""/>
  <span>ReactNews</span>
</a>复制代码

 css样式内background-image: url()

background-image: url('/static/images/veer-160866171.jpg');复制代码

二、webpack build打包后生产环境下的路径问题