1

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

未捕获的类型错误：超级表达式必须为 null 或函数，未在 _inherits 处未定义 (mylibrary-2.2.1.js?4b97a9abb4c0baa4939f:sourcemap:39228)

错误的屏幕截图

如果我重新启动 webpack 开发服务器，错误就会消失。每当我更新 .scss 文件时，都会再次出现同样的错误。

在我安装react-toolbox v2.0.0.0-beta.12之后，该错误开始出现。我知道这个错误可能是因为 beta 包。但是 react-toolbox 的贡献者说错误出在 webpack 配置上。

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

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

版本号：

提取文本 webpack 插件： “^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

4

1 回答 1

0

尝试类似下面的内容。如果您不想覆盖任何属性，则不必为 postcss-loader 提供完整的对象 - 您可以只使用一个字符串，'postcss-loader'，这'style-loader'就是包含的方式。

  {
    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',
                  },
                },
              },
            }),
          ],
        },
      },
    ],
  },
于 2018-09-02T20:23:48.887 回答