javascript - plugin - webpack doc_page src app page body body share_this_document

Webpack: Cargando imágenes desde plantillas html.

Question

Estoy tratando de configurar un proyecto angular utilizando Webpack pero no puedo averiguar cómo hacer referencia a imágenes desde plantillas html y hacer que se incluyan en la compilación.

Mi árbol de proyectos es el siguiente:

package.json
app/
- images/
  - foo.png
- scripts/
- styles/
- templates/

Estoy tratando de usar html-loader junto con url-loader y file-loader pero simplemente no está sucediendo.

Esta es una plantilla de ejemplo: app/templates/foo.html

<img src="../images/foo.png" />

Problema # 1 : Me gustaría poder hacer referencia a imágenes relacionadas con la app/ . En este momento, las rutas deben ser relativas al archivo de plantilla y esto se pondrá feo muy rápidamente ( ../../../images/foo.png ).

Problema nº 2 : incluso si especifico la ruta relativa, como lo he hecho anteriormente, el proyecto se genera con éxito pero en realidad no sucede nada. Las rutas se dejan como están y no aparecen imágenes en dist/ .

Aquí está mi configuración webpack:

var path = require(''path'');
var webpack = require(''webpack'');
var ngminPlugin = require(''ngmin-webpack-plugin'');
var HtmlWebpackPlugin = require(''html-webpack-plugin'');
var ExtractTextPlugin = require(''extract-text-webpack-plugin'');
var ngAnnotatePlugin = require(''ng-annotate-webpack-plugin'');
module.exports = function(config, env) {
  var appRoot = path.join(__dirname, ''app/'')
  if(!env) env = ''development'';
  var webpackConfig = {
    cache: true,
    debug: true,
    contentBase: appRoot,
    entry: {
      app: path.join(appRoot, ''/scripts/app.coffee'')
    },

    output: {
      path: path.join(__dirname, ''dist/),
      publicPath: ''/'',
      libraryTarget: ''var'',
      filename: ''scripts/[name].[hash].js'',
      chunkFilename: ''[name].[chunkhash].js''
    },

    module: {
      loaders: [
        {
          test: //.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
            test: //.scss$/,
            loader: ExtractTextPlugin.extract(''style-loader'', ''css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/'')
        },
        {
          test: //.coffee$/,
          loader: ''coffee-loader''
        },
        {
          loader: ''ngtemplate?relativeTo='' + (path.resolve(__dirname, ''./app'')) + ''/!html''
        },
        {
          test: //.png$/, loader: "url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"
        },
        {
          test: //.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
        },
        {
          test: //.(woff|woff2)(/?(.*))?$/,
          loader: ''url?prefix=factorynts/&limit=5000&mimetype=application/font-woff''
        },
        {
          test: //.ttf(/?(.*))?$/,
          loader: ''file?prefix=fonts/''
        },
        {
          test: //.eot(/?(.*))?$/,
          loader: ''file?prefix=fonts/''
        },
        {
          test: //.svg(/?(.*))?$/,
          loader: ''file?prefix=fonts/''
        },
        {
          test: //.json$/,
          loader: ''json''
        }
      ]
    },

    resolve: {
      extensions: [
        '''',
        ''.js'',
        ''.coffee'',
        ''.scss'',
        ''.css''
      ],
      root: [appRoot],
    },

    singleRun: true,
    plugins: [
      new webpack.ContextReplacementPlugin(/.*$/, /a^/),
      new webpack.ProvidePlugin({
        ''_'': ''lodash''
      }),
      new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
      new HtmlWebpackPlugin({
        template: appRoot + ''/app.html'',
        filename: ''app.html'',
        inject: ''body'',
        chunks: [''app'']
      })
    ],
    devtool: ''eval''
  }

  if(env === ''production'') {
    webpackConfig.plugins = webpackConfig.plugins.concat(
      new ngAnnotatePlugin(),
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.DefinePlugin({
        ''process-env'': {
          ''NODE_ENV'': JSON.stringify(''production'')
        }
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin()
    );
    webpackConfig.devtool = false;
    webpackConfig.debug = false;
  }
  return webpackConfig;

}

Answer 1

1. Sí, tendrá que hacerlo para cargar imágenes desde una ruta diferente.
2. Tuve un problema similar y resolví esto usando file cargador de file :

.

loaders: [{
  // JS LOADER
  test: //.js$/,
  loader: ''babel-loader?optional[]=runtime'',
  exclude: /node_modules/
}, {
  // ASSET LOADER
  test: //.(woff|woff2|ttf|eot)$/,
  loader: ''file-loader''
},
{
  //IMAGE LOADER
  test: //.(jpe?g|png|gif|svg)$/i,
  loader:''file-loader''
},
{
  // HTML LOADER
  test: //.html$/,
  loader: ''html-loader''
},
{
  //SCSS LOADER
  test: //.scss$/,
  loaders: ["style-loader", "css-loader", "sass-loader?indentedSyntax"]
}
]

Buena suerte

Answer 2

Con Webpack 4, pude resolver este problema actualizando html-loader para especificar la root de mis archivos. Así que dada la estructura original de @ syko; en webpack.config.js ...

module: {
  rules: [
    // other stuff above.....
    {
      test: //.html$/,
      use: [
        // ...The other file-loader and extract-loader go here.
        {
          loader: ''html-loader''
          options: {
            // THIS will resolve relative URLs to reference from the app/ directory
            root: path.resolve(__dirname, ''app'')
          }
        }
      ]
    }
  ]
}

Esto le indica al html-loader que interprete todas las URL absolutas de la carpeta /app . Entonces, en nuestra app/templates/foo.html , puedes usar lo siguiente ...

<img src="/images/foo.png" />

Esto le dice a html-loader que vea lo anterior como path.resolve(__dirname, ''app'', ''images'', ''foo.png'') . Entonces, si tiene extract-loader y / o file-loader , todas las rutas deben ser correctas.

Logré obtener esta solución después de martillarla por un tiempo. La mayor confusión es en qué parte de la pila del cargador se interpreta /images/foo.png , en este caso comienza en el complemento html-loader . Todo lo demás después de eso, es más acerca de cómo se publicarán los archivos de imagen.

Espero que ayude.

Answer 3

Puede utilizar file-loader para extraer imágenes. Luego, utilizando html-loader , puede especificar qué combinación de etiqueta-atributo debe procesar este cargador a través de los parámetros de consulta de parámetros.

Podría hacer que funcione con esta configuración:

{
    test: //.(jpe?g|png|gif|svg|ico)$/i,
    use: [{
        loader: ''file-loader'',
        options: {
            name: ''[name].[ext]'',
            outputPath: ''images/''
        }
    }]
},
{
    test: //.(html)$/,
    use: {
        loader: ''html-loader'',
        options: {
            attrs: [''img:src'', ''link:href'']
        }
    }
}

O en angular algo como esto:

attrs: ['':ng-src'', '':ng-href'']

Answer 4

Si está utilizando plantillas HTML en Webpack 2, además de usar el cargador de archivos que necesita cambiar en su HTML:

<img src="../images/foo.png" />

a esto

<img src=<%=require("../images/foo.png")%> />