6

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 出力フォルダーのフォントであるビルドでは正常に読み込まれますが、画像が読み込まれません

webpack の実行後にフォルダーをビルドする

4

1 に答える 1