javascript - Bagaimana CARA TIDAK menyelesaikan jalur dengan Webpack?

Saya sedang mengerjakan proyek ReactJs dengan Webpack dan sass-loader, css-loader & url-loader.

Saya ingin tidak menyelesaikan jalur font-face dan tetap persis seperti yang diatur dalam file SASS.

Masalahnya:

Jika saya memanggil path absolut (misalnya: http://fonts.com/my-font.eot atau /path/to/my-font.eot), path tersebut tidak terselesaikan.

Namun, jika saya menggunakan path relatif (yaitu: my-font.eot atau path/to/my-font.eot), url-loader mencoba untuk menyelesaikan path tersebut.

Dalam kasus saya, saya perlu menggunakan jalur relatif (meskipun itu menghasilkan kesalahan 404).

Apa yang saya coba:

Saya mencoba mengecualikan semua ekstensi font di url-loader, tetapi Webpack tidak tahu apa yang harus dilakukan dengan jenis file ini bahkan jika file tersebut kemungkinan tidak ada.

Berikut kesalahan yang saya dapatkan:

Pemrosesan modul gagal: C:....\fonts\my-font.eot Karakter tak terduga ' ' (1:1) Anda mungkin memerlukan loader yang sesuai untuk menangani jenis file ini.

Saya juga mencoba menonaktifkan opsi "url" dari css-loader, tetapi sama sekali tidak terjadi apa-apa. Saya kira sangat mungkin saya tidak menambahkan opsi tersebut dengan benar:

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

Berikut adalah seperti apa tampilan kode saya saat ini :

module: {
    loaders: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'path/dist/[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      ...
    ]
  },
  ...
}

Jawaban #1

Pertanyaan ini mungkin sedikit lama, tetapi saya masih ingin mengoreksi jawabannya.

Ketika Anda ingin menggunakan sintaks array, pada dasarnya Anda mendefinisikan semua opsi untuk setiap loader. Untuk melakukan hal ini, Anda harus menggunakan objek untuk loader dalam array. Jadi alih-alih

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

Kamu harus menulis

{
    test: /\.scss$/,
    loaders: [
         "style-loader", 
         {
            loader:'css-loader',
            options: {
                 url: false
            }
         },
         "sass-loader"],

},

Jawaban #2

Saya membutuhkan solusi yang berbeda dari yang diterima:

  /* webpackIgnore: true */
  background: url('/api/assets/?image=background.webp');

Berhasil. Dalam kasus saya, saya ingin melewati penyelesaian path yang ingin saya selesaikan dengan memanggil backend, jadi harus tetap seperti ini dan tidak boleh diselesaikan oleh Webpack.

Saya menemukan sintaks komentar ini /* webpackIgnore: true */ dari dokumentasi Webpack.

[SUNTING]

Ketika saya mencoba membangun, komentar Webpack terhapus (saya menggunakan Vue) oleh postcss & cssnano, dan saya harus menulisnya dalam bentuk ini agar komentarnya tetap ada dan juga lolos dari proses build: /*! /* webpackIgnore: true */