我正在构建Angular 8应用程序,但是在构建它时出现错误。我不知道如何在webpack中加载图像。我已经提出了一些建议,但是没有任何效果。我收到此错误:
ERROR in ./src/assets/images/icon_transparent.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/app/shared/navigation/navigation.component.html 1:265-326
@ ./src/app/shared/navigation/navigation.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
我使用的Webpack版本是否会影响此?
我的webpack.config.js是这个:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@': path.resolve(__dirname, 'src/app/'),
}
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// workaround for warning: System.import() is deprecated and will be removed soon. Use import() instead.
{
test: /[\/\\]@angular[\/\\].+\.js$/,
parser: { system: true }
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new webpack.DefinePlugin({
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}),
// workaround for warning: Critical dependency: the request of a dependency is an expression
new webpack.ContextReplacementPlugin(
/\@angular(\\|\/)core(\\|\/)fesm5/,
path.resolve(__dirname, 'src')
)
],
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: true
},
devServer: {
historyApiFallback: true
}
}
应作为外部资源(如图像,字体等)使用的文件,而不是捆绑到javascript代码中的文件,必须加载适当的webpack loader。通常它是webpack的本地file-loader。
// add this to your rules array
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: 'file-loader'
}
More about loading images with webpack。
也请考虑使用angular-cli而不是webpack。通常它的运行速度更快,而且您不会浪费时间编写Webpack配置。