webpackとless CSSの画像URLを含める方法

Question

私のwebpackとちょうど混同して、自分のCSSに画像用のURLを入れて、devとbuildモードで作業させるのに最適な方法を設定します。

以下は、webpack-devserverを使用して開発されたものですが、ビルド後は使用できません。

.login-container{ 
    height:100%; 
    width:100%; 
    background: url('../../images/home3.jpg') no-repeat center center fixed; 

私の設定では、 devに

plugins.push(
      new HtmlWebpackPlugin({ 
       template: './src/index.html', 
       inject: 'body' 
      }), 
      // Write out CSS bundle to its own file: 
      new ExtractTextPlugin({ 
       filename: 'css/styles.css', 
       allChunks: true}) 
     ); 

また

entry: { 
     app: './src/app/app.js' 
    }, 
    devServer: { 
     outputPath: path.join(__dirname, 'src'), 
     contentBase: "./src" 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: isProd ? '' : 'http://localhost:8080/', 
     filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js', 
     chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js' 
    }, 

それがうまく働いたが、ビルドした後に、それは私のcssフォルダから画像をロードしようとしていた

すなわち個人用サイト/ CSS/12424324234234234.jpg

の代わりに、すなわちmysites/12424324234234234.jpgここで画像本当にあった。

Answer 1

これらのソリューションは、以下のGithubの問題に記載されています。

Github Issues 1

Github Issues 2

プロセスのための回避策はExtractTextPluginは、CSS/[名前] .cssのようなファイル名を処理する必要があり、この

として行うことができます。回避策として代わりに[名前] .cssを使用できます。

セット{ publicPath: '/' }となり、各参照はルート相対となる。また、あなたはまた、これはsokra

code loaders: [ 
      { test: /\.css$/, loader: ExtractTextPlugin.extract(
       "style-loader", 
      "css-loader?sourceMap" 
      "css-loader?sourceMap", 
      { 
       publicPath: "../" 
      } 
      )}, 
      { test: /\.png$/, loader: "file-loader" } 
     ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]-[name]", { 
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[name]", { 
      disable: false, 
      allChunks: true 
     }), 

によって投稿コミット確認することができます url-loader

を使用することができます

OR