webpack---style-loader的配置：insertAt 和insert

這兩天在配置webpack4.0的時候，出現了下面的問題

 module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: "top"
                    },
                }, 'css-loader']
            },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

在配置style-loader的時候我想使生成的style標簽在head的標簽中已有style標簽的上面，但是我npm run dev的時候發生了下面的報錯

 

 提示不存在insertAt, 現在是insert

然后我找了相關資料，在webpack4.0中insertAt已經被廢棄，現在的api是insert, 這是一個函數，正確的配置如下：

 module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insert: function(element) {
                            var parent = document.querySelector('head');
                            var lastInsertedElement = window._lastElementInsertedByStyleLoader;
                            if (!lastInsertedElement) {
                                parent.insertBefore(element, parent.firstChild);
                            } else if (lastInsertedElement.nextSibling) {
                                parent.insertBefore(element, lastInsertedElement.nextSibling)
                            } else {
                                parent.appendChild(element)
                            }

                        }
                    },
                }, 'css-loader']
            },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }