异步代码分裂的WebPack - 意外的标记

Question

我只是跟随这guide

我有这样的代码：

import React, { PropTypes, Component } from 'react'; 

import('contact-page').then(() => {}); 

我得到这样的输出：

这是我的WebPack文件：

var webpack = require('webpack'); 
var packages = require('./package.json'); 
var path = require('path'); 

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var filterDependencies = ['normalize.css', 'font-awesome']; 
var dependencies = Object.keys(packages.dependencies).filter(f => !filterDependencies.some(fd => fd === f)); 


module.exports = { 
    entry: { 
     main: './src/index.js', 
     vendor: dependencies 
    }, 
    output: { 
     filename: '[name].js', 
     path: path.resolve(__dirname, 'dist') 
    }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "vendor", 
      minChunks: Infinity, 
     }), 
     new ExtractTextPlugin("styles.css"), 
     new HtmlWebpackPlugin({ 
      template: 'index.html' 
     }) 
    ], 

    module: { 
     rules: [ 
      { 
       test: /\.js?$/, 
       use: [ 'babel-loader', ], 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: "css-loader" 
       }), 
       exclude: /node_modules/ 
      }, 
      { 
       test: /(\.png|\.jpg|\.otf)$/, 
       use: ['file-loader?name=[name].[ext]&publicPath=assets/&outputPath=assets/'] 
      } 
     ] 
    }, 

    performance: { 
     hints: "warning", // enum 
     maxAssetSize: 200000, // int (in bytes), 
     maxEntrypointSize: 400000, // int (in bytes) 
     assetFilter: function (assetFilename) { 
      // Function predicate that provides asset filenames 
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); 
     } 
    }, 

    devtool: "source-map", // enum 

    target: "web", // enum 

    stats: "errors-only", 

    devServer: { 
     proxy: { // proxy URLs to backend development server 
      '/api': 'http://localhost:3000' 
     }, 
     contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location 
     compress: true, // enable gzip compression 
     historyApiFallback: true, // true for index.html upon 404, object for multiple paths 
     hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin 
     https: false, // true for self-signed, object for cert authority 
     noInfo: true, // only errors & warns on hot reload 
     // ... 
    } 
}; 

Answer 1

对于Dynamin导入我是使用babel-plugin-syntax-dynamic-import库 - https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

安装后必须扩展module.rules套喜欢的东西（只要你想混用ES2015和反应）：

module: { 
    rules: [ 
    { 
    test: /\.js?$/, 
    use: { 
     loader: 'babel-loader', 
     options: { 
     presets: [['es2015', "react"]], 
     plugins: ['syntax-dynamic-import'] 
     }, 
    }, 
    exclude: /node_modules/ 
    }, 
}, 

它在教程https://webpack.js.org/guides/code-splitting-async/#usage-with-babel更详细的描述。