Question

我正在

(function (exports, require, module, __filename, __dirname) { import 
HtmlWebpackPlugin from "html-webpack-plugin"
                                                          ^^^^^^

SyntaxError: Unexpected token import

package.json

中的依赖关系

webpack ：^3.10.0

@ babel / core ：^7.0.0-beta.38

@ babel / plugin-syntax-dynamic-import ：^7.0.0-beta.38

@ babel / plugin-transform-runtime ：^7.0.0-beta.38

@ babel / preset-env ：^7.0.0-beta.38

babel-loader ：^8.0.0-beta.0

我在 .babelrc

中的配置

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime"
  ]
}

我的 webpack.config.babel.js 配置

import HtmlWebpackPlugin from "html-webpack-plugin"

export default {
  // Our index file
  entry:  "./src/app/app.js",
  output: {
    path:     `${__dirname}/dist`,
    filename: "index_bundle.js",
  },

  module: {
    rules: [
      {
        test:    /\.js$/,
        exclude: /(node_modules)/,
        include: `${__dirname}/app`,
        use:     {
          loader:  "babel-loader",
        },
      },
    ],
  },

  plugins: [new HtmlWebpackPlugin()],
}

当我require "html-webpack-plugin"，并使用"module.exports"导出对象时，它工作正常，但我正在尝试在ES6中编写此内容。

如果有人可以指导/给我提示如何实现这一点，我将不胜感激。

非常感谢

Answer 1

这是一个问题@babel/plugin-transform-runtime。

我添加了@babel/register，现在一切正常。

Link to SO answer

Webpack：意外的令牌导入

1 个答案: