webpack 2中的动态导入无法正常工作

Question

我想在webpack 2中使用动态导入.我使用webpack 2.4.1

index.js

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import '../styles/custom.scss'

var btn = document.getElementsById('button');
btn.addEventListener("click", () => {
    import('./assets/chunk.css').then(()=>{
        console.log("Success")
    })
});

render(
  <Root />,
  document.getElementById('root')
)

但是,当我运行"npm start"时,它无效,并在index.js的第9行通知错误

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (9:4)

谢谢你的帮助!

Answer 1

正如wuxiandiejia所说,答案是

1. 安装 babel-plugin-syntax-dynamic-import
2. 确保'syntax-dynamic-import'你的宝贝出现options.plugins

例 babel.rc

{
  "plugins": [
    "syntax-dynamic-import",
}