웹팩 PNG 이미지

Question

를로드하지

나는 몇 src 폴더에있는 이미지를 가지고 : index.html을 파일에서

src/img/favicon.png 
src/img/profpic.png 

일부 HTML 파일에서

<link rel="shortcut icon" href="img/favicon.png" /> 

내가

로 가리 킵니다으로 나는 가리 킵니다

<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 출력 폴더에 이미지/글꼴을로드하려고합니다. 그 어떤 오류 던지지 않습니다. 그것의 성공적 구축하지만, 빌드에서 내 웹팩 출력 폴더 글꼴이 벌금을로드되지만 이미지가 트릭을 수행 HTML의 HTML 로더에 원시 로더를 변경

Answer 1

를로드하지 않습니다이다. 아래 내용이 변경되었습니다

{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: 'html-loader'** 
}, { 
    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$/, 
    exclude: /node_modules/, 
    loader: 'file-loader?name=images/[name].[ext]'** 
}