使用相對路徑從root用戶加載圖像 - > 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

好的 - 我已經弄清楚如何設置常見的圖像路徑，以便可以從項目中的任何HTML，JS或CSS加載圖像，只需要在每個實例中提供相同的公共路徑。

需要進行的更改是：

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

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

2. 僅在Webpack.config.js中 - 我們需要在輸出節中設置publicPath：

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

3. 在HTML，JS或CSS文件中，您可以參考如下圖像：

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

/ src中的圖像是 - '/'是publicPath，'images'是來自'dev'的src文件夾中的圖像，'dist'中的'images'是'prod'構建的圖像。

Answer 2

嘗試使用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不要直接處理url。