21

Webpack3 带有一个ModuleConcatenation插件，当与--display-optimization-bailout标志一起使用时，它会给你提供救助的理由。

救助消息并不那么容易理解，而且很难理解为什么它们会发生在特定模块上。

这是我webpack的项目非常简化版本的命令输出：

> webpack --bail --display-optimization-bailout

Hash: 4a9a55dc2883e82a017e
Version: webpack 3.4.1
Child client:
    Hash: 4a9a55dc2883e82a017e
    Time: 594ms
                                   Asset       Size  Chunks                    Chunk Names
        a.d3ade61d21d5cb8dd426.bundle.js  712 bytes       0  [emitted]         a
    a.d3ade61d21d5cb8dd426.bundle.js.map    6.57 kB       0  [emitted]         a
                           manifest.json  102 bytes          [emitted]         
                              index.html     299 kB          [emitted]  [big]  
       [0] multi ./src/client/bootstrap/ErrorTrap.js 28 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module
       [1] ./src/client/bootstrap/ErrorTrap.js 199 bytes {0} [built]
           ModuleConcatenation bailout: Module is not an ECMAScript module

./src/client/bootstrap/ErrorTrap.js我尽可能地简化了内容，但我仍然得到ModuleConcatenation bailout: Module is not an ECMAScript module. 以下是它的内容：

class ErrorTrap {
}

export default ErrorTrap;

我研究了这个救助消息，它发生的原因之一是模块没有导入或导出，如https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/ HarmonyDetectionParserPlugin.js#L12-L14，但我不知道为什么不将此模块视为ECMAScript模块。

.babelrc

{
  "presets": [
    "es2015"
  ]
}

webpack.config.js表示：

{ target: 'web',
  devtool: 'source-map',
  entry: { a: [ './src/client/bootstrap/ErrorTrap.js' ] },
  output:
   { path: '/project/build/client/assets',
     filename: '[name].[chunkhash].bundle.js',
     chunkFilename: '[name].[chunkhash].chunk.js',
     publicPath: '/assets/' },
  module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] },
  resolve: { alias: { 'lodash.defaults': 'lodash' } },
  plugins:
   [ ModuleConcatenationPlugin { options: {} },
     CommonsChunkPlugin {
       chunkNames: [Object],
       filenameTemplate: undefined,
       minChunks: Infinity,
       selectedChunks: undefined,
       children: undefined,
       async: undefined,
       minSize: undefined,
       ident: '/project/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' },
     ManifestPlugin { opts: [Object] },
     ChunkManifestPlugin {
       manifestFilename: 'chunk-manifest.json',
       manifestVariable: 'webpackManifest',
       inlineManifest: false },
     OccurrenceOrderPlugin { preferEntry: undefined },
     DefinePlugin { definitions: [Object] },
     VisualizerPlugin { opts: [Object] },
     ExtractTextPlugin { filename: '[name].[contenthash].css', id: 1, options: {} },
     UglifyJsPlugin { options: [Object] },
     LoaderOptionsPlugin { options: [Object] } ],
  name: 'client' }
4

3 回答 3

24

您正在使用 Babel 转译您的 JavaScript 文件，并且默认情况下es2015预设将 ES 模块 ( import/ export) 转换为 CommonJS (Node 使用的require)。Webpack 接收 CommonJS 模块，但ModuleConcatenationPlugin依赖于 ES 模块。modules您可以使用选项配置 Babel 以不转换模块。

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

Webpack 2+ 支持开箱即用的 ES 模块，最好将它们留给 webpack，因为它支持Tree Shaking等功能。

于 2017-07-29T01:25:59.147 回答
8

对于那些使用现代的人@babel/preset-env：

{
  "presets": [
    ["@babel/preset-env",{
      "targets": {
        ...
      },
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "plugins": [...
}

但是不好的事情（但不是关键的）在那之后我不能像以前一样在我的 webpack 配置文件中使用 ES 模块，所以在webpack.config.babel.js：

import webpack from 'webpack';

应改为：

const webpack = require('webpack');
于 2018-09-28T06:38:15.640 回答
0

我最近遇到了一个与 Ionic 和 Angular 非常相似的问题。我已经将一个自定义组件导入到 app.module.ts 中，然后将其插入到 entryComponents 中，后来我决定走一条不同的路线。我删除了导入并忘记了 entryComponents 条目。我有同样的错误。

ModuleConcatenation bailout: Module is not an ECMAScript module

然后它指向我的 variable.scss 路径，然后是以下行

ERROR in Cannot read property 'members' of undefined

因此，对于任何有类似问题的人（很可能使用 Ionic 和/或 Angular），您可能必须确保您没有尝试在页面中使用组件，但该组件实际上并未导入，但在页面中仍然有一个尾随点。 module.ts 入口组件。

于 2020-09-29T04:58:58.390 回答