无法使用“ html-loader”解析资产

问题描述

我正在尝试将Anglp的Gulp迁移到Webpack，以准备迁移到Angular。 加载html文件时，我无法解析我的资产，并且出现了很多这样的错误：

ERROR in ./src/app/space/tender-summary/actions-popup.html 6:33-72
Module not found: Error: Can't resolve './assets/icons/hourglass.svg' in '/home/marvin/workspace/plateforme/source/front/src/app/space/tender-summary'
 @ ./src/app/space/tender-summary/tender-summary.controller.js 738:18-123
 @ ./src/app/ sync (?<!\.spec)\.(js)$ ./space/tender-summary/tender-summary.controller.js
 @ ./src/app.js 12:11-64

所以我的根项目是：

/ home / marvin / workspace / plateforme / source / front /

文件位于

/ src / app / space / tender-summary

资产都在此文件夹中：

/ src / assets /

我知道我可以通过更改使其工作

<img src="assets/icons/hourglass.svg">

到

<img src="../../../assets/icons/hourglass.svg">

但是我不想重写我所有的html文件，因为有很多。 这是我的webpack.config.js

const path = require('path');
const webpack = require('webpack');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const glob = require('glob');

// assets.js
const Assets = require('./assets');

const paths = {
  assets: path.resolve(__dirname,'./assets'),dist: path.resolve(__dirname,'./dist'),node: path.resolve(__dirname,'./node_modules'),src: path.resolve(__dirname,'./src')
};

const vendor = Assets.JS.map(item => {
  return paths.node + '/' + item + '/';
});
vendor.push(paths.node + '/jquery-jcrop/js/jquery.Jcrop');
vendor.push(paths.node + '/ng-jcrop/ng-jcrop');
vendor.push(paths.src + '/app/core/modules/angular-google-places-autocomplete/autocomplete.min');
vendor.push(paths.src + '/app/core/preloader/preloader');
vendor.push(paths.src + '/app/core/services/underscore');
vendor.push(paths.src + '/assets/scripts/fa5-pro');

Assets.CSS.forEach(item => {
  vendor.push(paths.node + '/' + item);
})

module.exports = {
    entry: {
      vendor,app: paths.src + '/app.js'
    },output: {
      path: paths.dist,filename: '[name].js',publicPath: '/'
    },// Spin up a server for quick development
    devServer: {
      historyApiFallback: true,contentBase: paths.dist,open: true,compress: true,hot: true,port: 3000
    },plugins: [
      new CleanWebpackPlugin(),new CopyPlugin({
        patterns: [
          {
            from: paths.src + '/app/languages/',to: paths.dist + '/languages/'
          }
        ],}),new MiniCssExtractPlugin(),// Generates an HTML file from a template
      // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
      new HtmlWebpackPlugin({
        title: 'FretlyFrontend',favicon: paths.src + '/favicon.ico',template: paths.src + '/index.html',// template file
        filename: 'index.html' // output file
      })
    ],// Determine how modules within the project are treated
    module: {
      rules: [{
          // Add jQuery as a global object (needed for ng-jcrop)
          test: require.resolve('jquery'),loader: 'expose-loader',options: {
            exposes: ['$','jQuery']
          }
        },{
          // Add jQuery.Jcrop to the global jQuery (needed for ng-jcrop)
          test: require.resolve('jquery-jcrop'),'jQuery.Jcrop']
          }
        },{
          test: require.resolve('moment'),options: {
            exposes: ['moment','moment']
          }
        },{
          test: require.resolve('malarkey'),options: {
            exposes: ['malarkey','malarkey']
          }
        },// JavaScript: Use Babel to transpile JavaScript files
        {
          test: /\.m?js$/,exclude: [/\.(spec|e2e)\.js$/,/node_modules/],use: [{
              loader: 'babel-loader',options: {
                presets: ['@babel/preset-env']
              }
            },{
              loader: 'angularjs-template-loader',options: {
                relativeTo: paths.src
              }
            }
          ],},// Styles: Inject CSS into a new file
        {
          test: /\.(scss|css)$/,use: [
            MiniCssExtractPlugin.loader,// 4. Take all .css files into a single .css file
            'css-loader',// 3. Inject .css files
            {
              // 2. Adds css processors
              loader: 'postcss-loader',options: {
                postcssOptions: {
                  plugins: [
                    [
                      'postcss-preset-env',// convert modern CSS into compatible CSS
                      'autoprefixer' // auto adds vendor prefixes
                    ]
                  ]
                }
              }
            },{
              // 1. Import .scss files and convert it to .css
              loader: 'sass-loader',options: {
                additionalData: (content,loaderContext) => {
                  const {
                    resourcePath,rootContext
                  } = loaderContext;
                  const relativePath = path.relative(rootContext,resourcePath);

                  let newContent = '';

                  // include dependencies in every files except themself
                  if (relativePath !== 'src/app/styles/variables.scss') {
                    newContent += '@import "' + rootContext + '/src/app/styles/variables.scss";';
                  }
                  if (relativePath !== 'src/app/styles/mixins.scss') {
                    newContent += '@import "' + rootContext + '/src/app/styles/mixins.scss";';
                  }

                  return newContent + content;
                }
              }
            }
          ]
        },{
          test: /\.html$/,use: [{
            loader: 'html-loader',options: {
              attributes: {
                root: paths.src,}],exclude: /node_modules/
      },// Images: Copy image files to build folder
      {
        test: /\.(?:ico|png|jpe?g|gif)$/i,use: ['file-loader']
      },// Fonts and SVGs: Inline files
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,type: 'asset/resource'
      }
    ]
  },optimization: {
    splitChunks: {
      chunks: 'all',cacheGroups: {
        vendors: {
          minChunks: 3,test: /[\\/]node_modules[\\/]/,priority: -10
        },default: {
          minChunks: 2,priority: -20,reuseExistingChunk: true
        }
      }
    },minimize: false,minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,keep_fnames: true
        }
      }),new CssMinimizerPlugin()
    ]
  }
};

我尝试使用attribute.root选项使用html-loader编辑相对路径“ / src”，但它不起作用。 如何使我的资产正常工作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）