Webpack的相對CSS URL（）與文件加載器/ CSS加載器

Question

我對webpack/npm相當新，我試圖讓我的頭周圍如何與其他項目依賴項的CSS網址工作。

文件夾結構

src 
    fonts/ 
    scss/ 
    app.scss 
    js/ 
    app.js 
    img/ 
    index.html 

webpack.config.js

var path = require('path'); 
var extractPlugin = require('extract-text-webpack-plugin'); 
var cleanWebpackPlugin = require('clean-webpack-plugin'); 
var htmlWebpackPlugin = require('html-webpack-plugin'); 
var webpack = require("webpack"); 

module.exports = { 
    entry: './src/js/app.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'js/app.js' 
    }, 
    devServer: { 
     stats: 'errors-only', 
     compress: true, 
     open: true, 
     port: 9000 
    }, 
    module: { 

     rules: [ 

      // ES6 -> ES5 transpiler 

      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['es2015'] 
        } 
       } 
      }, 

      // SCSS to CSS -> Autoprefix -> Load CSS 

      { 
       test: /\.(scss|css)$/, 
       use: extractPlugin.extract({ 
        use: [ 
         'css-loader', 
         { 
          loader: 'postcss-loader', 
          options: { 
           plugins: (loader) => [require('autoprefixer')()] 
          } 
         }, 
         'sass-loader' 
        ] 
       }) 
      }, 

      // HTML Loader 
      { 
       test: /\.html$/, 
       use: ['html-loader'] 
      }, 

      // Image Loader 
      { 
       test: /\.(jpg|png|svg|gif)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          outputPath: 'img/', 
          name: '[name].[ext]' 
         } 
        } 
       ] 
      }, 
      // Font Loader 
      { 
       test: /\.(eot|ttf|woff)$/, 
       use: [ 
        { 
         loader: 'file-loader', 
         options: { 
          outputPath: 'fonts/', 
          name: '[name].[ext]' 
         } 
        } 
       ] 
      } 


     ] 

    }, 
    plugins: [ 
     new extractPlugin({filename: 'scss/app.css'}), 
     new cleanWebpackPlugin(['dist']), 
     new htmlWebpackPlugin({ template: 'src/index.html' }), 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) 
    ] 
}; 

我已經成功地納入lightGallery在我的項目，像這樣：

app.js

import 'lightgallery'; 

app.scss

@import '~lightgallery/dist/css/lightgallery.css'; 

光畫廊樣式的引用的字體我敢成功加載到fonts/使用的WebPack file-loader

我的問題是，內置CSS文件試圖從scss文件夾而不是我的根引用相對字體。

即：http://localhost:9000/scss/img/loading.gif

我需要從CSS鏈接到所有的資產從我的根目錄

即http://localhost:9000/img/loading.gif

解決反正我有可以配置我的CSS-裝載機前面加上所有的URL與a /？

幫助！

Answer 1

file-loader尊重output.publicPath，但是因爲你沒有設置它，結果路徑將是一個相對路徑。您可以將公共路徑設置爲/。

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'js/app.js', 
    publicPath: '/' 
}, 

這將影響其他裝載機和插件，以及處理任何資產。這通常是你想要的，因此建議，但是如果你只想爲特定文件改變它，你可以使用file-loader上的publicPath選項。

{ 
    loader: 'file-loader', 
    options: { 
     outputPath: 'img/', 
     name: '[name].[ext]', 
     publicPath: '/' 
    } 
}