使用相对路径从 root 加载图像 using--> webpack - file-loader - Angularjs

Question

我正在使用 Webpack 在 HTML、CSS 和 JS 上加载图像。

我的配置是：

{
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: [
        'angular', './src/lib.js', './src/app.js',
    ],
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
},
module: {
    rules: [{
        test: /\.(jpe?g|png|gif|svg)$/i,
         loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'],
    },{
        test: /\.css|scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader']
        })
    },{
        test: /\.html$/,
        exclude: [
            path.join(__dirname, '/src/index.html')
        ],
        use: [
            { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src'))},
            { loader:  'html-loader'},
            ]
        }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Project Demo,
            minify: {
                collapseWhitespace: true,
            },
            cache: true,
            hash: true,
            inject: true,
            filename: './index.html',
            template: 'src/index.html'
        }),
        new ExtractTextPlugin({
            filename: "app.css",
            disable: false,
            allChunks: true
        })
    ],
    devServer: {
        port: 9000
    },
};

    module.exports = config;
}

我的项目文件夹结构：

- dist
    - images [folder]
    - index.html
    - app.css
    - main.js 
- node_modules
- src
    - images
    - javascripts/pages/HTML Files
    - stylesheets
    - app.js (BootStrapping angular)
    - lib.js 
    - index.html
- webpack.config.js
- package.js

我只想引用来自 HTML、CSS 和 JS（至少在 JS 中的图像位置）的包含图像，但目前我所有的图像路径都是相对于图像文件夹到模板文件的。

在这种情况下，为每个 HTML 和 JS 文件配置路径就像地狱一样。

所以我的问题是：我怎样才能有通用路径，以便在 HTML、JS 或 CSS- 我会只需在任何文件中引用图像名称，通用路径就会在图像文件夹中找到它。

非常感谢帮助!!!

Answer 1

尝试使用 resolve.alias 属性为您的资产定义别名：

resolve: {
  alias: {
    images: path.resolve(__dirname, 'src/images')
  }
},

那么您应该可以在 Html 中引用您的图像，例如：

<img src="~images/some_image.png" alt="image alt text" />

然后您的 css-loader（或 html-loader，我不太确定）将解析正确的路径。

编辑

像这样编辑 css 加载程序：

use: ExtractTextPlugin.extract({
  fallback: "style-loader",
  use: [
    {loader: 'css-loader?url=false'}
  ]
})

忘了这个。 url=false 参数告诉 css-loader 不要直接处理 urls。

Answer 2

好的 - 我已经弄清楚如何设置公共图像路径，以便可以从项目中的任何 HTML、JS 或 CSS 加载图像，只需要提供相同的 public 每个实例的路径。

需要更改的是：

在Webpack.config.js文件中，我们需要添加新插件

new CopyWebpackPlugin([{
    from: './src/images',
    to: 'images'
}]),

仅在 Webpack.config.js - 我们需要将输出部分的 public 路径设置为：

output: {
          path: path.join(__dirname, 'mcaid'),
          filename: 'bundle.js',
          publicPath: '/',     <----- this is been added
},

在HTML、JS或CSS文件中，您可以引用如下图片：
```
<img src="/images/some_Image_file.png"/>
```

/images in src is -- '/' is publicPath and 'images' is images from src folder for 'dev' and 'images' 来自 'dist' 用于 'prod' 构建。

使用相对路径从 root 加载图像 using--> webpack - file-loader - Angularjs

Image loading from root using relative path using--> webpack - file-loader - Angularjs

javascript

angularjs

webpack

html-webpack-plugin

webpack-file-loader