如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?

例如:

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

与其说这是一种需求,不如说是一种好奇心。


当前回答

我在Webpack 2上运行@Juho的解决方案时遇到了一个问题。Webpack迁移文档建议你打开babel模块解析:

重要的是要注意,您将希望告诉Babel不要解析 这些模块符号,以便webpack可以使用它们。你可以通过 在.babelrc或babel加载器选项中设置以下内容。 .babelrc:

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

遗憾的是,这与自动巴别寄存器功能相冲突。删除

{ "modules": false }

巴别塔的配置让一切重新运转起来。然而,这将导致破坏摇树,所以一个完整的解决方案将涉及覆盖加载器选项中的预设:

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

编辑,2017年11月13日;更新webpack配置片段到webpack 3(感谢@x-yuri)。旧的Webpack 2代码片段:

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

其他回答

编辑:截至2021年2月

https://github.com/webpack/webpack-cli/pull/2381


你不能。你必须把它转换成CommonJS,要么用babel要么用esm。

https://github.com/webpack/webpack-cli/issues/282

但是你可以运行webpack -r esm @babel/register

将es6添加到webpack需要3个步骤

在webpack.config.js中添加 模块:{ 规则:[ { 测试:/ \ . js /美元, 装载机:“babel-loader” } ] } 创建一个。babel。Rc,然后加进去

{ "presets": ["@babel/env", "@babel/react"], “插件”:( [ “@babel / plugin-proposal-class-properties”, ] ] }

在包中。json添加

NPM install @babel/core NPM install @babel/preset-env——save-dev NPM install @babel/preset-react——save-dev NPM install @babel/plugin-proposal-class-properties NPM安装babel-loader——save-dev

我最好的方法与npm脚本是

node -r babel-register ./node_modules/webpack/bin/webpack

并根据您对Babel的需求配置其余脚本

看了无数的文件之后……

只需安装es2015预置(不是env !!)并将其添加到 .babelrc: { “预设”:( ["es2015", {"modules": false}] ] } 将webpack.config.js重命名为webpack.config.babel.js

我在Webpack 2上运行@Juho的解决方案时遇到了一个问题。Webpack迁移文档建议你打开babel模块解析:

重要的是要注意,您将希望告诉Babel不要解析 这些模块符号,以便webpack可以使用它们。你可以通过 在.babelrc或babel加载器选项中设置以下内容。 .babelrc:

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

遗憾的是,这与自动巴别寄存器功能相冲突。删除

{ "modules": false }

巴别塔的配置让一切重新运转起来。然而,这将导致破坏摇树,所以一个完整的解决方案将涉及覆盖加载器选项中的预设:

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

编辑,2017年11月13日;更新webpack配置片段到webpack 3(感谢@x-yuri)。旧的Webpack 2代码片段:

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