在webpack.config中使用ES6的import和export default

Question

我希望能够在我的webpack.config中使用es6的import和export default语法。如果我像这样运行我的webpack。 webpack.config.js

"webpack": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

我遇到一个错误 SyntaxError：Unexpected token import，这是可以预料的。然后我在其他问题的解决方案中发现了一个看起来适用于许多人的解决方案。将文件重命名为webpack.config.babel.js并包含babel-register。我尝试了一下。

"webpack": "cross-env NODE_ENV=development node -r babel-register node_modules/.bin/webpack-dev-server --config=webpack.config.babel.js"

但是现在我遇到了这个错误。

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list

我尝试了很多使用babel-node和babel-register的组合，但似乎都无效。我使用的是Windows 10系统。请问如何解决这个问题？

- Igor-Vuk

Answer 1

尝试直接运行webpack，不使用 babel-register:

"webpack": "cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --config=webpack.config.babel.js"

此外，请确保在您的.babelrc文件中有babel-plugin-transform-es2015-modules-commonjs插件，或者如果您使用es2015预设，则将modules选项设置为true。如果您不想让Babel在其他情况下转译模块（例如制作生产捆绑包时），可以告诉babel-loader不使用.babelrc并手动指定预设。

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    babelrc: false,
    presets: [
      ['latest', {
        modules: false,
      }],
    ],
  },
},

- Michał Perłakowski

---

谢谢。现在它可以工作了，但我又遇到了另一个问题。我的HMR/React热加载器已经停止注入更改。我必须手动刷新页面才能看到更改。这与什么有关？我使用服务器端渲染。 - Igor-Vuk