Question

我无法让Webpack编译我的ES2015脚本。它将捆绑所有Javascript和SASS文件，但没有ES6到ES5的转换。这是留下＆＃34;胖箭＆＃34;，＆＃34;让＆＃34;语句和我编译的代码中的其他ES6功能。

请帮我弄清楚我做错了什么。

这是我的webpack.config.js文件。它位于项目根目录。项目文件位于/app.v2中，entry.js位于/app.v2/entry.js

＆＃13;

module.exports = {
    entry: "entry.js",
    output: {
        path: "app.v2",
        filename: "bundle.js"
    },
    resolve: {
        modulesDirectories: [
            './app.v2/components',
            './app.v2',
            'node_modules',
            './app.v2/bower_components',
            './app.v2/assets/js'
        ],
        extensions: ['', '.js', '.es6']
    },
    module: {
        loaders: [
            {
                test: /\.es6$/,
                include: ['./app.v2/components', './app.v2'],
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader?cacheDirectory=cache/babelCache',
                query: {
                    presets: ['es2015-without-strict']
                }
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff&name=assets/fonts/[name].[ext]"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=assets/fonts/[name].[ext]"
            }
        ]
    }
};

＆＃13;

Answer 1

您的babel-loader仅适用于扩展名为.es6的文件。由于您的入口点文件是entry.js，因此不使用此加载程序。

将文件扩展名更改为.es6或webpack.config

中的加载程序测试

{
    test:/\.(js|es6)$/,                            // <-- this line
    include: ['./app.v2/components', './app.v2'],
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader?cacheDirectory=cache/babelCache',
    query: {
        presets: ['es2015-without-strict']
    }
}

Answer 2

我想我发现了这个问题。我删除了Babel加载器的include属性，现在文件正在正确编译。

如果有人能解释为什么这会解决这个问题，我很想知道原因。

module.exports = {
entry: "entry.js",
output: {
    path: "app.v2",
    filename: "bundle.js"
},
resolve: {
    modulesDirectories: [
        './app.v2/components',
        './app.v2',
        'node_modules',
        './app.v2/bower_components',
        './app.v2/assets/js'
    ],
    extensions: ['', '.js', '.es6']
},
module: {
    loaders: [
        {
            test: /\.(js|es6)$/,
            // include: ['./app.v2/components', './app.v2'], <-- Remove this.
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                cacheDirectory: 'cache/babelCache', // <-- Move all query params to here.
                presets: ['es2015-without-strict']
            }
        },
        {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        },
        {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader?limit=10000&minetype=application/font-woff&name=assets/fonts/[name].[ext]"
        },
        {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader?name=assets/fonts/[name].[ext]"
        }
    ]
}
};

Webpack没有编译ES2015脚本

2 个答案: