Pertanyaan jendela tidak didefinisikan kesalahan saat menggunakan ekstrak-teks-webpack-plugin Bereaksi


Saya menggunakan webpack untuk membangun komponen reaksi saya dan saya mencoba menggunakan extract-text-webpack-plugin untuk memisahkan css saya dari file js yang saya buat. Namun, ketika saya mencoba untuk membangun komponen, saya mendapatkan kesalahan berikut: Module build failed: ReferenceError: window is not defined.

File webpack.config.js saya terlihat seperti ini:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    MainComponent: './src/main.js'
  },
  output: {
    libraryTarget: 'var',
    library: 'MainComponent',
    path: './build',
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
    }]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

76
2018-01-29 19:31


asal


Jawaban:


Anda mungkin ingin menggunakannya style-loader sebagai before argumen dalam extract fungsi.

Inilah implementasi asli:

    ExtractTextPlugin.extract = function(before, loader, options) {
        if(typeof loader === "string") {
            return [
                ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
                before,
                loader
            ].join("!");
        } else {
            options = loader;
            loader = before;
            return [
                ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
                loader
            ].join("!");
        }
    };

Jadi pada dasarnya apa yang perlu Anda lakukan adalah:

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

jika Anda misalnya digunakan sass.


59
2018-06-22 14:11



Tidak melihat penjelasan penyebabnya jadi saya telah memposting jawaban ini di sini.

Dari https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options])   Membuat loader penggalian dari loader yang ada.

notExtractLoader (opsional) loader (s) yang harus digunakan ketika css tidak diekstraksi (yaitu dalam> potongan tambahan ketika allChunks: false)

loader loader (s) yang harus digunakan untuk mengkonversi sumber daya ke modul ekspor css.

options

publicPath mengesampingkan pengaturan publicPath untuk loader ini.

Itu #extract metode harus menerima loader yang menghasilkan css. Apa yang terjadi adalah bahwa ia menerima style-loader output mana kode javascript, yang dimaksudkan untuk disuntikkan ke halaman web. Kode ini akan mencoba mengakses window.

Anda tidak boleh melewatkan string loader dengan style untuk #extract. Namun ... jika Anda mengaturnya allChunks=false, maka tidak akan membangun file CSS untuk potongan non-awal. Oleh karena itu perlu tahu apa yang digunakan loader untuk menyuntikkan ke halaman.

Tip: Webpack adalah alat yang benar-benar perlu dipahami secara mendalam atau Anda dapat mengalami banyak masalah aneh.


41
2018-02-12 17:58



Webpack 2

Jika Anda menggunakan Webpack 2, variasi ini berfungsi:

    rules: [{
        test: /\.css$/,
        exclude: '/node_modules/',
        use: ExtractTextPlugin.extract({
            fallback: [{
                loader: 'style-loader',
            }],
            use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            }, {
                loader: 'postcss-loader',
            }],
        }),
    }]

Metode ekstrak baru tidak lagi membutuhkan tiga argumen, dan terdaftar sebagai perubahan saat berpindah dari V1 ke V2.

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change


19
2018-02-12 15:49



Saya menemukan solusi untuk masalah saya:

Alih-alih mem-pipe loader ke satu sama lain (ExtractTextPlugin.extract('style-loader!css-loader')), Anda harus meneruskan setiap loader sebagai parameter terpisah: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')


12
2017-11-06 16:28