Webpack i18n 插件不适用于 babel es6

Question

我正在尝试将 i18n-webpack-plugin 与 babel-loader 一起使用。

我的 webpack 配置：

var path        = require("path"),
    I18nPlugin  = require("i18n-webpack-plugin"),
    webpack     = require("webpack"),
    languages   = {
        "en": null,
        "es": require("./src/locale/es.po.json")
    };

module.exports = Object.keys(languages).map(function(language) {
    return {
        name: language,
        entry: {
            home: "./src/static/scripts/script.js",
            alt: "./src/static/scripts/alt.js"
        },
        output: {
            path: path.join(__dirname, "dist/static/scripts"),
            filename: language + ".[name].output.js"
        },
        modules: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: ["babel-loader"]
                },
            ]
        },
        plugins: [
            new I18nPlugin(
                languages[language]
            ),
            new webpack.optimize.UglifyJsPlugin({minimize: true})
        ]
    };
});

我收到的错误：

ERROR in ./src/static/scripts/script.js
    Module parse failed: /Users/anthonydandrea/react/gulp-react-flask/src/static/scripts/script.js Line 1: Unexpected token
    You may need an appropriate loader to handle this file type.
    | import React from 'react';

不确定导致问题的原因。似乎从未使用过 babel，也不会让我在第一行导入 ES6。注意：当我注释掉 ES6 代码时一切正常。

Answer 1

我明白了。将 'babel-loader' 更改为 'babel'。完整代码如下

var path        = require("path"),
    I18nPlugin  = require("i18n-webpack-plugin"),
    webpack     = require("webpack"),
    babel = require("babel-loader"),
    languages   = {
        "en": null,
        "es": require("./src/locale/es.po.json")
    };

module.exports = Object.keys(languages).map(function(language) {
    return {
        name: language,
        entry: {
            home: "./src/static/scripts/script.js",
            alt: "./src/static/scripts/alt.js"
        },
        output: {
            path: "./dist/static/scripts",
            filename: language + ".[name].output.js"
        },
        module: {
            loaders: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel'
                }
            ]
        },
        plugins: [
            new I18nPlugin(
                languages[language]
            ),
            new webpack.optimize.UglifyJsPlugin({minimize: true})
        ]
    };
});

Answer 2

对数组使用 'loaders'，对字符串使用 'loader'。

loader: 'babel?someparam!ts'

对比

loaders: ['babel?someparam', 'ts']

Webpack i18n 插件不适用于 babel es6

Webpack i18n plugin not working with babel es6

webpack

babeljs