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

我正在使用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中使用
只需在任何文件中引用图像名称,通用路径就会在图像文件夹中找到它.

非常感谢帮助!!!

解决方法

好的 – 我已经弄清楚如何设置常见的图像路径,以便可以从项目中的任何HTML,JS或CSS加载图像,只需要在每个实例中提供相同的公共路径.

需要做出的改变是：

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

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

>仅在Webpack.config.js中 – 我们需要在输出部分中设置publicPath：

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

>在HTML,JS或CSS文件中,您可以参考如下图像：

<img src="/images/some_Image_file.png"/>

/ src中的图像是 – ‘/’是publicPath,’images’是来自’dev’的src文件夹中的图像,’dist’中的’images’是’prod’构建的图像.