相关疑难解决方法(0)

我正在使用webpack来管理reactjs项目.我想通过webpack在javascript中加载图像file-loader.下面是webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS = {
    react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
    app: path.join(__dirname, 'src'),
    build: path.join(__dirname, './dist')
};

module.exports = {
    entry: {
        jsx: './app/index.jsx',
    },
    output: {
        path: PATHS.build,
        filename: 'app.bundle.js',
    },
    watch: true,
    devtool: 'eval-source-map',
    relativeUrls: true,
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.less'],
        modulesDirectories: ['node_modules'],
        alias: {
            normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
        }
    },
    module: {
        preLoaders: [

            {
                test: …

编辑：AFAIK这不是Webpack的重复项，在输出上禁用图像名称的哈希，因为：

• webpack.config在当前的angularCli版本中不再可编辑。

• 我想将哈希保留在文件名上，以清除缓存。

我正在使用Angular，我想预加载字体，我尝试使用

  <link rel="preload" href="assets/someFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

但是，在构建过程中，我的字体会散乱地散列，因此我的字体将被复制到根文件夹并重命名为如下所示。

myFont.e31fcf1885e371e19f57.woff2

我的@fontface参考将指向该字体。

所以最后我实际上是两次加载相同的字体，而不是预加载字体，因为浏览器会看到不同的URL

• /assets/myFont.woff2
• myFont.e31fcf1885e371e19f57.woff2

如何预加载字体并保留哈希功能（用于缓存清除）？

我需要使用 webpack 加载 ico 和 svg 文件。但是，文件名转换为哈希数，因此 HTML 文件无法归档这些资产并生成 404 错误。

我需要加载器来散列资产文件名，并同时在 HTML 文件中将文件名更改为散列名称。我怎样才能做到这一点？

这是显示一个 svg 和一个图标的 html 代码。

    <object type="image/svg+xml" data="spider-web.svg">
      Your browser does not support SVG
    </object>
    <img src="favicon.ico" alt="">

下面是 webpack 配置文件：

'use strict';
// webpack.config.js

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var entryBasePath  = __dirname;
var outputBasePath = __dirname + '/dist';


module.exports = {
    context: entryBasePath,
    entry:{
        app: ['webpack/hot/dev-server', './appEntry.js']
    },
    output: {
        path: outputBasePath,
        filename: './bundle.js',
        sourceMapFilename: '[file].map' // …