Webpack-TypeError:this [MODULE_TYPE]不是childCompiler.runAsChild的函数

时间:2019-07-18 16:09:24

标签: webpack sass

尝试从css迁移到scss并将所有加载程序放置在我的Webpack中,但它给了我这个错误:TypeError:this [module_type]不是childCompiler.runAsChild的函数。我需要所有的scss文件执行与css文件相同的功能。我最近添加了minicssloader和/.module.s(a|c)ss$/,并测试:/.s(a|c)ss$/,此后开始出现错误。

const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HashPath = require("./react/.compile/index.js");
const cesiumSource = "../../../node_modules/cesium/Source";
const cesiumBuild = "../../../node_modules/cesium/Build/Cesium";
const cesiumWorkers = "../Build/Cesium/Workers";
const styleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === "development";


module.exports = {

  entry: {
    "common": [path.resolve(__dirname, "./react/common.js")],
//more lines of code
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: 5,
        uglifyOptions: {
          compress: { warnings: false }
        }
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor",
          enforce: true
        }
      }
    }
  },
  resolve: {
    alias: {
      "cesium": path.resolve(__dirname, cesiumSource),
      "images": path.resolve(__dirname, "assets/static/images")
    },
    extensions: [".js", ".jsx", ".scss"]
  },
  output: {
    path: path.join(__dirname, "assets", "build"),
    publicPath: "/assets/build/",
    filename: "[name].[hash].js",
    sourcePrefix: ""
  },
  amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
  },
  node: {
    // Resolve node module use of fs
    fs: "empty"
  },
  plugins: [
    new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), cesiumWorkers), to: "Workers" }]),
    new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), "Assets"), to: "Assets" }]),
    new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumSource), "Widgets"), to: "Widgets" }]),
    new CopyWebpackPlugin([{ from: path.join(path.resolve(__dirname, cesiumBuild), "Widgets"), to: "Widgets" }]),
    new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/assets/build/") }),
    new CleanWebpackPlugin([
      path.join(__dirname, "assets", "build", "*.js"),
      path.join(__dirname, "assets", "manifest.json")],
      { root: __dirname, verbose: true, dry: false, exclude: [] }
    ),
    new HashPath(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new styleLintPlugin({
      configFile: './.stylelintrc.json',
      context: 'src',
      files: "src/**/*.scss",
      failOnError: false,
      syntax: "scss",
      emitErrors: true,
      quiet: false
    }),
    new MiniCssExtractPlugin({
      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
      chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
    })
  ],
  module: {
    unknownContextRegExp: /\.js$/,
    unknownContextCritical: false, // disable dynamic requires for .js files
    rules: [
      {
        test: /\.module\.s(a|c)ss$/,
        loader: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              camelCase: true,
              sourceMap: isDevelopment
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment
            }
          }
        ]
      },
      {
        test: /\.s(a|c)ss$/,
        exclude: /\.module.(s(a|c)ss)$/,
        loader: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment
            }
          }
        ]
      },

      // Lints files with ESLint before compiling
      {
        enforce: "pre",
        test: /\.jsx?$/,
        exclude: /(node_modules|thirdparty)/,
        loader: "eslint-loader",
      },
      // Babel compiler to compile ES6/ES2015 code into plain old JavaScript
      // Once ES2015 gains more support in browsers this could probably be replaced with with the plain old React loader
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react", "stage-2"],
          plugins: ["transform-object-rest-spread"],
        }
      },

      // CSS loader for loading CSS from JS
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-import')(),
                require('stylelint')()
              ]
            }
          }
        ]
      },

      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader?hash=sha512&digest=hex&name=[name].[ext]",
          "image-webpack-loader?{mozjpeg: {progressive: true},gifsicle: {interlaced: false},optipng: {optimizationLevel: 7},pngquant: {quality: '65-90',speed: 4}}"
        ]
      },

      // Needed to load Bootstrap from NPM
      // Loaders for a bunch of font files
      {
        test: /bootstrap\/js\//,
        use: ["imports-loader?jQuery=jquery"]
      },

      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },

      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      },

      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.swf$/,
        use: ["file-loader?name=[path][name].[ext]"]
      },

      {
        test: /vtt\.js$/,
        use: ["file-loader?name=[path][name].[ext]"]
      },

      {
        test: /\.style.js$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } }
        ]
      }

    enter code here
    ]
  }
};

0 个答案:

没有答案