Question

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

使用删除的Babel 5选项：base.modules - 使用plugins选项中相应的模块转换插件。查看http://babeljs.io/docs/plugins/#modules

此外，我收到另一个错误

./index.js中的错误模块解析失败：意外的令牌（9:16）您可能需要适当的加载程序来处理此文件类型。

这些错误似乎很有用，但我无法找到问题所在。

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

版本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。但是您在only上设置了babel-loader选项，该选项告诉Babel 仅与给定路径匹配的transm文件。因此，它仅适用于node_modules，而不适用于项目的其余部分。这与你想要的完全相反。

您的.jsx规则应为：

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

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

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

从第1版到第2版迁移Webpack

1 个答案: