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'，对string使用'loader'。

loader: 'babel?someparam!ts'

VS

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

Webpack i18n插件不兼容babel es6

2 个答案: