webpack没有找到我的导入或转换我的es6代码 [英] webpack is not finding my imports or converting my es6 code

问题描述

我是新来的webpack，并试图为我的客户端项目设置。我已经在这里创建了一个回购站，这里有我的整个源代码。

我的webpack配置看起来像这样：

  var path = （'路径'）; 
 module.exports = {
 entry：'./public/js/main.js'，
 output：{
 path：__dirname，
 filename：'。 /public/dist/bundle.js'
}，
 module：{
 loaders：[{
 test：/\s/s/s/b 
 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 import 。而且看起来结果的bundle代码不会转换为es6，而只是拥有我的 main.js 文件的整个内容。

在哪里我犯错？

解决方案

在你的包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：/\s/s/s/b 
 loaders： ['babel？presets [] = es2015']，
 include：[
 path.resolve（__ dirname，./public/js），
]，
 exclude： [
 path.resolve（__ dirname，node_modules），
] 
}]，
 resolve：{
 extensions：[''，'.js' '.jsx'] 
} 
} 
}; 
  

运行npm安装和webpack。它应该可以正常工作。

I'm new to webpack and trying to set up for my client side project. I have created a repo over here, which has my entire source code.

My webpack config looks like this:

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']
        }
    }
};

When I run:

webpack

its bundling my js and putting it to dist folder. However, I can see the bundled file is not having Point.js or loadash that can be found on my main.js imports. And also looks like the resulted bundle code is not converted to es6 but rather just having the entire content of my main.js file.

Where I'm making mistake?

解决方案

Made following changes in your package 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"
}

and in 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']
    }
}
};

Run npm install and the webpack. It should work fine.

这篇关于webpack没有找到我的导入或转换我的es6代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！