javascript - share_this_document - webpack requiere imagen relativa

webpack vue images

Question

Tengo dos archivos:

• ./img/mypic.png
• ./js/help/targets/target.js

En target.js:

<img src={require("../../../img/target.png")} />

Con webpack.config.js:

 14   module: {
 15     loaders: [
 16       { test: //.js$/, loader: ''jsx-loader?harmony'' },
 17       { test: //.css$/, loader: ''style-loader!css-loader'' },
 18       { test: //.(png|jpg|jpeg|gif|woff)$/, loader: ''url-loader?limit=8192'' },

Que compila la imagen en ./[hash].png .

Ahora, uso react-router , entonces estoy en /help/targets/target y webpack está dando a la imagen esta ruta /help/targets/[hash].png donde hash es una suma sha1. Prefiero si le dio la ruta /[hash].png . Sólo

¿Cómo hago para que webpack entienda que para este archivo js, ​​la ruta del archivo a la imagen es relativa de la misma manera que en el navegador?

Answer 1

El truco es darle a webpack una configuración-pista sobre en qué basar sus rutas:

Utilizar:

"output": { "publicPath": "/" }

Decirle a webpack que no sea relativo.