webpack 加载html模板,Webpack：从html模板加载图像

我正在尝试使用Webpack设置一个有角度的项目，但是我不知道如何从html模板中引用图像并将其包含在构建中。

我的项目树如下：

package.json

app/

- images/

- foo.png

- scripts/

- styles/

- templates/

我正在尝试html-loader与url-loader和一起使用，file-loader但这只是没有发生。

这是一个示例模板： app/templates/foo.html

问题＃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;

}