Question

我有反应，webpack项目。当我更新我的scss文件时，Webpack编译器失败并抛出以下错误：

未捕获的TypeError：超级表达式必须为null或函数，而不是在_inherits中未定义（mylibrary-2.2.1.js？4b97a9abb4c0baa4939f：sourcemap：39228）

如果我重新启动webpack dev服务器，则错误消失。每当我更新.scss文件时，再次出现相同的错误。

在我安装 react-toolbox v2.0.0.0-beta.12 之后，错误开始了。我知道错误可能是因为beta包。但react-toolbox贡献者表示错误发生在webpack配置中。

请注意，添加以下配置后错误已开始：

sourceMap: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:8]"

版本号：

extract-text-webpack-plugin：“^ 3.0.0”，

webpack：“^ 3.3.0”，

webpack-dev-server：“^ 2.6.1”，

反应：“^ 15.6.1”

完整的webpack配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
const argv = require("yargs").argv;
const path = require("path");

const isProd = argv.env === 'prod';
const configResolve = require.resolve("./src/config/" + argv.env + ".js");
const config = require("./src/config/" + argv.env + ".js");
const _package = require("./package.json");
const JS_JSX_PATTERN = /\.jsx?$/;
const SCSS_PATTERN = /\.scss$/;
const CSS_PATTERN = /\.css$/;
const ASSET_PATTERN = /\.(jpe?g|png|gif|svg|ttf|otf|eot|woff(2)?)(\?v=\d+)?$/;
const DEV_SERVER_PORT = 8080;
const PROJECT_NAME = process.env.npm_package_name;
const VERSION = (_package.version);
const DESCRIPTION = (_package.description);
const PACKAGE_NAME = PROJECT_NAME + "-" + VERSION;
const distFolder = isProd ? 'dist' : '';

const extractCSS = new ExtractTextPlugin(`${PACKAGE_NAME}.css`);

const HtmlWebpack =
new HtmlWebpackPlugin({
  template: 'src/index.ejs',
  inject: 'body',
  hash: true,
  filename: `index.html`,
  description: DESCRIPTION
});

let plugins = [HtmlWebpack, extractCSS];
let rules = [
  {
    test: JS_JSX_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    loader: "babel-loader",
    options: {
      presets: ["react", "es2015", "stage-1"]
    }
  },
  {
    test: SCSS_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    use: extractCSS.extract({
      fallback: "style-loader",
      use: [{
        loader: "css-loader",
        options: {
          minimize: isProd,
          sourceMap: true,
          importLoaders: 1,
          localIdentName: "[name]--[local]--[hash:base64:8]"
        }
      },
        "sass-loader"
      ]
    })
  },
  {
    test: ASSET_PATTERN,
    loader: 'file-loader',
    options: {
      name: `assets/[name]-[hash].[ext]`
    }
  },
  {
    test: JS_JSX_PATTERN,
    include: [
      path.resolve(__dirname, "src/scripts")
    ],
    enforce: 'pre',
    loader: 'eslint-loader',
    options: {
      failOnWarning: false,
      failOnError: isProd,
      quiet: isProd
    }
  },
  {
    test: CSS_PATTERN,
    loader: 'style-loader!css-loader'
  }
];

if (isProd) {
  plugins.push(
    new UglifyJSPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  );
}

module.exports = {
  entry: [
    "./src/scripts/index.jsx",
    "./src/scripts/index.scss"
  ],
  output: {
    path: path.resolve(__dirname, distFolder),
    publicPath: config.homeUrl,
    filename: `${PACKAGE_NAME}.js`
  },
  module: {
    rules: rules
  },
  resolve: {
    extensions: [".js", ".jsx"],
    modules: [
      path.resolve(__dirname, 'src/scripts'),
      path.resolve(__dirname, 'src/assets'),
      path.resolve(__dirname, 'node_modules')
    ],
    alias: {
      config$: configResolve
    }
  },
  devServer: {
    port: DEV_SERVER_PORT,
    historyApiFallback: true,
    contentBase: "./"
  },
  plugins: plugins
};

完整来源：https://github.com/arikanmstf/mylibrary

Answer 1

尝试以下类似方法。如果您不想覆盖任何属性，则不必为postcss-loader拥有完整的对象-您可以仅包含一个字符串'postcss-loader'，这就是包含'style-loader'的方式。 / p>

  {
    test: /\.css$/,
    include: path.resolve(__dirname, 'node_modules'),
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true, // default is false
          sourceMap: true,
          importLoaders: 1,
          localIdentName: '[name]--[local]--[hash:base64:8]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            cssnext({
              features: {
                customProperties: {
                  variables: {
                    'color-primary': '#269acc',
                    'preferred-font': 'Futura',
                  },
                },
              },
            }),
          ],
        },
      },
    ],
  },

Webpack SCSS更新未捕获的TypeError

1 个答案: