Webpack: Загрузка изображений из html-шаблонов

Question

Я пытаюсь настроить угловой проект с помощью Webpack, но я не могу понять, как ссылаться на изображения из шаблонов html и включать их в сборку.

Мой проект дерево выглядит следующим образом:

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

Я пытаюсь использовать html-loader вместе с url-loader и file-loader, но это просто не происходит.

Это пример шаблона: app/templates/foo.html

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

Проблема № 1: Я хотел бы, чтобы иметь возможность ссылаться на изображения относительно app/. Прямо сейчас пути должны быть относительно файла шаблона, и это очень быстро уродливо (../../../images/foo.png).

Проблема №2: Даже если я укажу относительный путь, как я уже делал выше, проект строится успешно, но ничего действительно не происходит. Пути остаются как есть, а изображения не отображаются в dist/.

Вот мой 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. Да, вы должны сделать это для загрузки изображений из разных пути.
2. У меня был подобный вопрос и я решил это, используя 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"] 
} 
] 

Good Luck

Answer 2

Если вы используете шаблоны HTML в Webpack 2, в дополнение использовать файл-загрузчик, что нужно изменить в HTML:

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