Question

我正在使用Angular和Webpack编写一个电子应用程序，我遇到了一个问题，即我对图像的唯一引用在某种程度上会在构建中出现偏差。我怀疑这是一个webpack配置错误以某种方式与电子运行应用程序的关系 - 假设实际结果URL指向正确的目录，根据输出到dist时.js和.png文件的位置。

图片在login.component.html

中被引用

src目录如下所示：

src
├── app/
│   └── login/
│        ├── login.component.html
│        ├── login.component.ts
│        └── login.component.css
└── assets/
    └── images/
        └── someimage.png

dist dir：

 dist 
   ├── assets/
   │    └── images/
   │        └── someimage.png
   ├── index.html
   ├── index.js
   ├── app.css
   └── app.js

这是我的常用配置

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/app.ts',
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    target: "electron-renderer",

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    }, 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src','app'),
                use: [{
                    loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMaps: true
                    }
                }, 
                {
                    loader: "resolve-url-loader"
                },
                {
                    loader: "sass-loader", 
                    options: {
                        sourceMaps: true
                    }
                }]
            },
            {
                test: /\.scss$/,
                include: helpers.root('src','app'),
                use: [
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),

        new CopyWebpackPlugin([
            {from: helpers.root('./src/index.js'),to: helpers.root('./dist/index.js')},
            {from: helpers.root('./package.json'),to: helpers.root('./dist/package.json')}
        ])
    ]
};

和我的产品合并上面的

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');
const ElectronConnectWebpackPlugin = require('electron-connect-webpack-plugin');
const path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  output: {
    path: helpers.root('dist'),
    filename: '[name].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),

    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    })
  ]
});

Answer 1

事实证明，index.html缺少<base href="./"> - 添加此内容并正确解析了网址

Answer 2

您使用错误的图像路径。

在Angular项目中，您不必添加相对路径您的文件到图像文件。

Angular为您解决了这个问题，在组件中，您必须仅将路径添加到资产文件夹，而不是../../ assets。

✅此代码将起作用：

<img src="assets/img.jpg" alt="">

⛔，此代码将不起作用：

<img src="../../assets/img.jpg" alt="">

在打包的电子应用程序中找不到图像资源 - angular4和webpack

2 个答案: