将 Webpack 从版本 1 迁移到版本 2

Question

我想将 webpack 1 配置文件转换为 webpack 2 版本。另外，我想从包中排除节点模块。我得到了以下异常

Using removed Babel 5 option: base.modules - Use the corresponding module transform plugin in the plugins option. Check out http://babeljs.io/docs/plugins/#modules

此外，我得到另一个错误

ERROR in ./index.js Module parse failed: Unexpected token (9:16) You may need an appropriate loader to handle this file type.

这些错误似乎提供了很多信息，但我找不到问题所在。

我是否遗漏了迁移指南中的内容？

版本 1

const config = {
    entry: './index.js',
    output: {
        path: '/',
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};
module.exports = config;

版本 2

const config = {
    entry: './index.js',
    output: {
        path:'/',
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules:[
            {
                test:/\.jsx?$/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            only:['/node_modules/'],
                            presets:['es2015', 'react']
                        },
                    }
                ]
            }
        ]
    }
};

module.exports = config;

Answer 1

对于 Babel 的第一个错误，您可能有一个仍然使用 Babel 5 的依赖项，并且它包含一个在 Babel 6 中不再允许的配置。这可能是因为您正在尝试转换您的 node_modules，因为你已经删除了 exclude 选项，它在 webpack 2 中没有改变。Babel 总是使用它能找到的最接近的配置。

对于第二个错误，您正在使用一些需要 Babel 的语法，大概是 JSX。但是你已经在 babel-loader 上设置了 only 选项，它告诉 Babel 仅转译与给定路径匹配的文件。因此，它仅适用于 node_modules，不适用于项目的其余部分。这与你想要的完全相反。

您的 .jsx 规则应该是：

{
    test:/\.jsx?$/,
    exclude:/node_modules/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets:['es2015', 'react']
            },
        }
    ]
}

您还将 output.path 设置为 /。那是文件系统的根目录，而不是项目的根目录。使用webpack config所在的目录，可以使用Node的__dirname，即当前执行文件所在目录的绝对路径（即webpack.config.js）

output: {
    path: __dirname,
    filename: 'bundle.js',
},

将 Webpack 从版本 1 迁移到版本 2

Migration Webpack from version 1 to 2

reactjs

webpack

babeljs

webpack-2