Webpack `当使用巴别塔6时，网页包要求（…）不是一个函数

一切似乎都很好： 使用以下配置

但是，当我运行代码时，我得到以下错误（通过webpack dev server）：

我认为巴贝尔在某种程度上干扰了

\uuuuu webpack\uuuu require\uuuuu

，但我不确定。我尝试过使用不同的转换/插件，但没有找到解决方案

.LRC：

{
  "plugins":[
    "transform-runtime",
    "transform-node-env-inline"
  ],
  "presets":[
    "stage-0",
    "es2015"
  ]
}

这是我的webpack.config.js：

var Clean = require('clean-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var fs = require('fs');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
var path = require('path');
var StatsPlugin = require('stats-webpack-plugin');
var webpack = require('webpack');

//CONSTANTS

var NODE_ENV = process.env.NODE_ENV;
var IS_DEV = NODE_ENV === 'development';
var babelFile = fs.readFileSync('./.babelrc', 'utf8');
var BABELRC = JSON.parse(babelFile);
var cleanFonts = function(){
  return new Clean(['dist/tmp/*.{ttf,eot,svg,woff}']);
}
var cleanImages = function(){
  return new Clean(['dist/tmp/*.{png,jpg}']);
}
var cleanJs = function(){
  return new Clean(['dist/*.{js,map}']);
}
var plugins = [
  new webpack.NoErrorsPlugin(),
  cleanJs(),
  // new StatsPlugin('stats.json', {chunkModules: true}),
  new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery" }),
  new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
  new HtmlWebpackPlugin({
    template: 'client/app/vendors/assets/index-tmpl.html',
    filename: 'index.html'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.js',
    chunks:['customer','personalOrganization','app']
  })
  // new ngAnnotatePlugin({add: true})
  // new ExtractTextPlugin("style.[hash].css", {
  //    disable: false,
  //    allChunks: true
  // }),

  //new webpack.optimize.CommonsChunkPlugin({minChunks: 2, children: true, async: true}),
  // new CompressionPlugin({asset: "{file}.gz", algorithm: "gzip", regExp: /\.js$|\.html$/, threshold: 10240, minRatio: 0.8 })
];
var dev_plugins = [
]
var prod_plugins = [
  cleanFonts(),
  cleanImages(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    sourceMap: false,
    compress: { warnings: false },
    mangle: false
  }),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.AggressiveMergingPlugin()
];
if(NODE_ENV !== 'development'){
  plugins = plugins.concat(prod_plugins);
}
else{
  plugins = plugins.concat(dev_plugins);
}
babelLoaderOpts = {
  cacheDirectory: true
};
Object.assign(babelLoaderOpts, BABELRC);
module.exports = {
  cache: IS_DEV,
  // watch: IS_DEV,
  devtool: 'source-map',
  entry: {
    "app": "./client/app/app.js",
    "devserver": 'webpack-dev-server/client?http://localhost:3000'
  },
  output: {
      path: __dirname + "/dist",
      filename: '[name].[hash].js'
  },
  module: {
        noParse: [
          /moment.js/
        ],
        loaders: [
            { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components|vendors)/,
              loader: 'babel',
              query: babelLoaderOpts
            },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded"+"&includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")},
            { test: /\.css$/,  loader: 'style!css' },
            { test: /\.(png|jpeg|jpg|gif)$/, loader: 'url-loader?limit=30000&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff(\?\S*)?$/,  loader : 'url?prefix=font/&limit=10000&mimetype=application/font-woff&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff2/, loader: 'url?prefix=font/&limit=100000&mimetype=application/font-woff2&name=tmp/[name].[ext]&no_emit_env=development' },
            { test: /\.ttf/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.eot/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.svg/,loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            //{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&&includePaths[]='+ path.resolve(__dirname, './node_modules/compass-mixins/lib')) },
            //{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
      ]
  },
  devServer: {
    contentBase: './client/app'
  },
  resolve: {
      modulesDirectories: ['vendors','node_modules', 'bower_components'],
      extensions: ['', '.js', '.json']
  },
  plugins: plugins
};

---

在我的网页开发服务器条目文件中更新到Babel6之后，我遇到了类似的问题。正如@Serhey在评论中提到的，我通过从require切换到import解决了我的问题，即，

require（'./devTools）（store）到
从“/devTools”导入devTools；开发工具（商店）
我认为建议的从“需要”转换为“导入”的解决方案是不正确的。导入需要发生在文件的顶部，因此您不能让生产构建忽略devtools。你需要一个有条件的要求

我认为这解决了问题。看看这个，看看它是如何在项目中使用的。
我也有同样的错误。处理es6模块时，应使用require（…）。默认值

例如：

const angular = require('angular');
const ngModule = angular.module('app', []);
require('./directives').default(ngModule);
// or
var kgdir = require('./directives').default;
kgdir(ngModule);

然而，这也应该起作用

您可以查看此页面：
我通过在我的webpack.config中添加缺少的加载程序解决了类似问题。不知道为什么这可以解决这个问题，但是您可能想看看是否也缺少一个加载程序

（澄清一下-当我将库降级到早期版本时，我最初发现问题出在加载程序上。网页包错误消息说缺少json加载程序，因此我在配置中添加了以下内容，然后可以返回到最新版本：

module:{
loaders : [
  {
      test: /\.json$/,
      loader: "json-loader"
    }
]
}

)
我想补充一下出现此错误的另一个原因：

我做了以下工作：

import mapActions from 'vuex'

而不是：

import { mapActions } from 'vuex'

前者导入整个
vuex
export，这是一个对象。添加对象分解解决了这个问题。
我也遇到了同样的问题。解决方案是从require语句切换，例如

let fs = require("fs");

经由

import * as fs from 'fs';

您还可以通过webpack配置中的externals数组公开所有节点模块。由于它们是通过Web包外部提供的，因此不需要它们，而是与导入一起使用

module.exports = {
   "externals": {
      "electron": "require('electron')",
      "child_process": "require('child_process')",
      "fs": "require('fs')",
      "path": "require('path')",
      ...
   }
}

您可以在中了解有关此问题的更多信息。
我的网页出现此问题，因为我正在为web和节点构建项目，并且在
条目中使用了
同构取消蚀刻

我通过使用适当的fetch替换
同构的unfetch
来修复它：web的
unfetch
，nodejs的
节点fetch

webpack.config.js

module.exports = [
  {
    entry: ['unfetch', 'regenerator-runtime/runtime', './lib/app.js'],
    ...
  },
  {
    entry: ['node-fetch', 'regenerator-runtime/runtime', './lib/app.js'],
    target: 'node',
    ...
  },
];

我的情况与上面@William给出的答案正好相反。
包括{}in
从“vuex”导入mapActions
帮助了我。
作为：

我在尝试直接从require
require（'module-test'）（）调用函数时遇到了这样的错误但模块返回不是函数；还有一个问题，如果您尝试将
require（“”）
与ES6语法一起使用，babel loader返回对象。改用
import
。我也有同样的问题。我的项目是98%的AMD模块和2%的新ES6模块。我想逐渐转向ES6，但如果我需要修改所有使用新ES6模块的模块，那就很难了。在Babel 5中工作得很好。有关于这个问题的更新吗？当我使用“watch”编译时，每隔一次编译都会发生这种情况。要“修复”它，我需要从头开始重建，而不是使用“手表”，这是一个巨大的浪费时间。该插件不适合我。。仍然得到相同的错误。这使我走上了正确的道路-我导出了一个默认对象，然后尝试将其作为
importedObj（）
Hi执行，这消除了最初的问题，但我面临另一个问题。任何想法：
uncaughtreferenceerror:require未定义
@Mr.Benedict这可能是因为Web不支持require。您可以尝试
target:'node'
，但这在前端（web）上不起作用。感谢您的解决方案，不幸的是，我遇到了另一个运行时错误
readdata.js:8 Uncaught TypeError:Cannot readFromDataFile（readdata.js:8）eval（index.js:8）上未定义的属性“readFileSync”在webpack_require（bundle.js:20）的Module../src/index.js（bundle.js:109）在bundle.js:84在bundle.js:87 readFromDataFile@readdata.js:8（匿名）@index.js:8./src/index.js@bundle.js:109 webpack_require@bundle.js:20（匿名）@bundle.js:84（匿名）@bundle.js:87我不知道为什么，但如果它不起作用，你可以通过移除大括号来改变。对我来说，使用大括号是可行的，但对于以前的没有大括号的项目，效果很好。
module.exports = [
  {
    entry: ['unfetch', 'regenerator-runtime/runtime', './lib/app.js'],
    ...
  },
  {
    entry: ['node-fetch', 'regenerator-runtime/runtime', './lib/app.js'],
    target: 'node',
    ...
  },
];

import { mapActions } from 'vuex'