javascript - webpack 找不到我的导入或转换我的 es6 代码

Question

我是 webpack 新手，正在尝试为我的客户端项目进行设置。我已经在 here 创建了一个存储库，其中有我的全部源代码。

我的 webpack 配置如下所示:

var path = require('path');
module.exports = {
    entry: './public/js/main.js',
    output: {
        path: __dirname,
        filename: './public/dist/bundle.js'
    },
    module: {
        loaders: [{ 
            test: /\.js$/,
            loader: "babel-loader",
            include: [
                path.resolve(__dirname, "./public/js"),
            ],
            exclude: [
              path.resolve(__dirname, "node_modules"),
            ]
        }],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

当我运行时:

webpack

它捆绑了我的 js 并将其放入 dist 文件夹中。但是，我可以看到捆绑文件没有在我的 main.js 导入中找到的 Point.js 或 loadash 。而且看起来生成的捆绑代码没有转换为 es6，而只是包含我的 main.js 文件的全部内容。

我哪里出错了？

Answer 1

在包 json 中进行了以下更改:

"devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "webpack": "^1.13.0"
}

在 webpack.config.js 中:

var path = require('path');
module.exports = {
entry: './public/js/main.js',
output: {
    path: __dirname,
    filename: './public/dist/bundle.js'
},
module: {
    loaders: [{
        test: /\.js$/,
        loaders: ['babel?presets[]=es2015'],
        include: [
            path.resolve(__dirname, "./public/js"),
        ],
        exclude: [
            path.resolve(__dirname, "node_modules"),
        ]
    }],
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}
};

运行 npm install 和 webpack。应该可以正常工作。