「ModuleConcatenation救済：モジュールはECMAScriptモジュールではない」救済措置のメッセージでモジュールを修正するには？

Question

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 

は、私は同じくらい私はできる、と私はまだ ModuleConcatenation bailout: Module is not an ECMAScript moduleを得るよう ./src/client/bootstrap/ErrorTrap.jsの内容を簡素化。ここで、その内容は以下のとおりです。

class ErrorTrap { 
} 

export default ErrorTrap; 

私は、この救済のメッセージを理解するに見て、モジュールがhttps://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14で見られるように、輸入または輸出を持っていませんが、私にはわからないときそれが起こる理由の一つでありますなぜこのモジュールを考慮していないのですかECMAScriptモジュール。

{ 
    "presets": [ 
    "es2015" 
    ] 
} 

webpack.config.js表現.babelrc：あなたはあなたのJavaScriptファイルをtranspileするバベルを使用している

{ 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' } 

Answer 1

とes2015プリセット変換のESモジュールはデフォルトで（import/export）をCommonJS（ノードが使用するもの、require）に送信します。 WebpackはCommonJSモジュールを受信しますが、ModuleConcatenationPluginはESモジュールを使用します。 modules optionでモジュールを変換しないようにBabelを設定することができます。

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

のWebPACK 2+は、箱から出しESモジュールをサポートしますが、そのようなTree Shakingなどの機能を可能にしますので、それは、WebPACKのにそれらを残すのがベストです。