src フォルダーにいくつかの画像があります。
src/img/favicon.png
src/img/profpic.png
index.html ファイルでは、次のように指定します
<link rel="shortcut icon" href="img/favicon.png" />
一部のhtmlファイルでは、次のように指定します
<img src="img/profpic.png" />
webpack経由で画像、フォントを読み込もうとしています。以下は私のwebpack.configです
module.exports = {
context: path.resolve('src'),
entry: {
app: ["./index.ts"]
},
output: {
path: path.resolve('build'),
filename: "appBundle.js"
},
devServer: {
contentBase: 'src'
},
watch: true,
module: {
preLoaders: [
{
test: /\.ts$/,
loader: "tslint"
}
],
loaders: [
{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}, {
test: /\.html$/,
exclude: /node_modules/,
loader: 'raw'
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=1000000&mimetype=application/font-woff'
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}, {
test: /\.json$/,
loader: "json-loader"
}, {
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
}
];
}
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: 'body',
hash: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
})
],
resolve: {
extensions: ['', '.js', '.es6', '.ts']
}
}
画像/フォントを webpack 出力フォルダーにロードしようとしています。エラーは発生しません。正常にビルドされましたが、私の webpack 出力フォルダーのフォントであるビルドでは正常に読み込まれますが、画像が読み込まれません