javascript - 无法在 webpack 配置中使用 ES6 导入

Question

CommonJS import const webpack = require('webpack'); 工作正常，但 ES6 import webpack from 'webpack'; 不。

来自 Webpack Documentation :

Version 2 of webpack supports ES6 module syntax natively.

但它对我来说不是开箱即用的。

我也试过:

• 对 JS 文件使用 babel-loader；
• 将“babel”添加到配置文件名中。

但这一切都行不通。

package.json

"scripts": {
    "build:dev": "webpack --config webpack.config.dev.babel"
},
"devDependencies": {
    "babel-loader": "^7.1.4",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-merge": "^4.1.2"
}

webpack.config.common.babel.js

export const /* in this implied like default */ module = {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/'
        }
    ],
};

webpack.config.dev.babel.js

import webpack from 'webpack';
import merge from 'webpack-merge';
import commonConfig from './webpack.config.common.babel';

export default merge(commonConfig, {
    mode: 'development',
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
});

.babelrc

{
    "presets": ["es2015"]
}

当我输入 npm run build:dev 时抛出:

import webpack from 'webpack';
^^^^^^

SyntaxError: Unexpected token import

问题:

1. 如何使 ES6 导入工作？
2. 是否可以开箱即用，即没有任何 babel-loader 包？

Answer 1

嗯，我注意到的第一件事是你不能在你的 webpack 文件中使用“import”。你需要“要求”:

  const webpack = require('webpack');

你不能用import，因为那是ES6，你还没装babel怎么用ES6呢？没有 JS 引擎 (afaik) native 支持 ES6，而且绝对不支持 Node。

此外，我认为您会收到针对 ES2015 的警告 - 我认为现在应该是“babel-preset-env”。