- > webpack - file-loader - Angularjsを使用して相対パスを使用してルートから画像をロード

Question

Webpackを使用してHTML、CSSおよびJSに画像をロードしています。

私のConfigがある：

{ 
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; 
} 

私のプロジェクトのフォルダ構造：私はちょうどHTML、CSSやJS（少なくともJSで画像の位置）から画像を含める参照したい

- 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 

が、現在はすべての私のイメージパスはイメージフォルダからテンプレートファイルへの相対パスです。

この場合、1つのHTMLファイルとJSファイルごとにパスを設定するのは地獄のようです。

ので、私のqustionsは次のとおりです。どのようにHTML、JSやCSS- I'LL にちょうど任意のファイルや一般的なパスにイメージ名を参照するように、私は一般的なパスを持つことができることは、画像フォルダにそれを見つけるでしょう。

ご協力ありがとうございました！

Answer 1

Ok - 私は画像をどのように設定すればよいのか分かりました。あなたのプロジェクトのHTML、JS、またはCSSから画像を読み込み、すべてのインスタンスで同じ公開パスを与えるだけです。

Webpack.config.jsファイルで

1. は、我々は唯一のWebpack.config.jsで新しいプラグイン

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

2. を追加する必要がある - 私たちは、セットアップする必要があります。必要な

   変更は、ということです出力部でpublicPath：HTML、JSやCSSファイルで

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

3. 、あなたがREFEすることができますRのような画像：

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

/画像SRCでがある - '/' publicPathと '画像' である 'DEV' と 'DIST' から '画像' のためのsrcフォルダからのイメージ'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-ローダー（またはhtml-loader、私はそれについて確信していません）正しいパスを解決します。

EDIT

編集このようなCSSローダー：

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

がこれを忘れました。 url = falseパラメータは、URLを直接処理しないようにcss-loaderに指示します。