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文件夹中。但是，我可以看到捆绑的文件没有Point.js或loadash，可以在main.js imports找到。并且看起来结果包代码不会转换为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。它应该工作正常。

Answer 2

要完成XtremeCoder的答案，我需要添加到webpack.config.js以使其正常工作：

module: {
    loaders: [{ 
        test: /\.js$/,
        loader: "babel-loader",
        include: [
            path.resolve(__dirname, "./public/js"),
        ],
        exclude: [
          path.resolve(__dirname, "node_modules"),
        ],
        query: {
          presets: ['es2015']
        }
    }],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
}

webpack没有找到我的导入或转换我的es6代码

2 个答案: