Webpack 抛出 TypeError: Super expression must be null or a function, not undefined 在导入 LESS 文件时答案

【问题标题】：Webpack throws TypeError: Super expression must either be null or a function, not undefined when importing LESS fileWebpack 抛出 TypeError: Super expression must be null or a function, not undefined 在导入 LESS 文件时
【发布时间】：2018-01-12 14:42:52
【问题描述】：

我在文件initialize.js 中有以下内容：

import App from './components/App';

import './styles/application.less';

document.addEventListener('DOMContentLoaded', () => {
    const app = new App();

    app.start();
});

在webpack.config.js 我有：

'use strict';

const path = require('path');

const webpack = require('webpack');
const merge = require('webpack-merge');

const ProvidePlugin = webpack.ProvidePlugin;
const ModuleConcatenationPlugin = webpack.optimize.ModuleConcatenationPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractLess = new ExtractTextPlugin({
    filename: 'app.css',
});

const webpackCommon = {
    entry: {
        app: ['./app/initialize']
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader?presets[]=es2015'
            }]
        }, {
            test: /\.hbs$/,
            use: {
                loader: 'handlebars-loader'
            }
        }, {
            test: /\.less$/,
            exclude: /node_modules/,
            use: extractLess.extract({
                use: [{
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }],
                // use style-loader in development
                fallback: 'style-loader'
            }),
        }]
    },
    output: {
        filename: 'app.js',
        path: path.join(__dirname, './public'),
        publicPath: '/'
    },
    plugins: [
        extractLess,
        new CopyWebpackPlugin([{
            from: './app/assets/index.html',
            to: './index.html'
        }]),
        new ProvidePlugin({
            $: 'jquery',
            _: 'underscore'
        }),
        new ModuleConcatenationPlugin(),
    ],
};

module.exports = merge(webpackCommon, {
    devtool: '#inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        port: 9000
    }
});

我尝试删除插件和application.less 的内容，但我不断收到此错误：

ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./app/styles/application.less

Module build failed: TypeError: Super expression must either be null or a function, not undefined
at ...
@ ./app/styles/application.less 4:14-127
@ ./app/initialize.js

如果我用CSS 替换那个LESS 文件并更新配置它工作正常，所以我猜这个问题与less-loader 有关。

我正在使用 Webpack 3.4.1、Style Loader 0.18.2、LESS Loader 4.0.5、Extract Text Webpack Plugin 3.0.0 和 CSS Loader css-loader。

【问题讨论】：

标签： javascript webpack css-loader webpack-3 extracttextwebpackplugin

【解决方案1】：

我的错，我没有注意到我使用的是旧的 less 版本。那是罪魁祸首。刚刚更新到2.7.2，问题就消失了。

【讨论】：