的WebPack编译错误

Question

以下是webpack.config.js文件为我作出反应的应用程序

module.exports = { 
     entry: 'index.js', 
     output: { 
     filename: 'bundle.js', 
     path: '/.' 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react'] 
      } 
      } 
     ] 
     } 
    }; 

，我在执行得到错误如下：

npm ERR! code ELIFECYCLE 
npm ERR! errno 4294967295 
npm ERR! loginpoc@1.0.0 start: `webpack-dev-server --hot` 
npm ERR! Exit status 4294967295 
npm ERR! 
npm ERR! Failed at the loginpoc@1.0.0 start script 'webpack-dev-server --hot'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the loginpoc package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  webpack-dev-server --hot 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs loginpoc 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls loginpoc 
npm ERR! There is likely additional logging output above 

我的package.json是如下

{ 
    "name": "loginpoc", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.5.3", 
    "react-dom": "^15.5.3", 
    "webpack": "^2.3.3", 
    "webpack-dev-server": "^2.4.2" 
    } 
} 

请让我知道你在哪里建议我哪里错了？

Answer 1

尝试使用此作为您的配置。

var path = require('path'), 
module.exports = { 
     entry: 'index.js', 
     output: { 
     path: path.resolve(__dirname + '/') 
     filename: 'bundle.js', 
     publicPath: '/' 
     }, 
     devServer: { 
     contentBase: './', 
     inline: true, 
     hot: true, 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react'] 
      } 
      } 
     ] 
     } 
    }; 

我在这里所做的是根据此文档添加一些缺失的配置选项。 configuration。请注意我添加的路径导入 我也稍微修改了一些配置选项。

Answer 2

需要进行一些更改才能使您的配置正常工作。由于您发布的错误只是npm的噪音，所以实际的错误是最重要的，我会告诉您实际发生的错误以及如何修复错误。

ERROR in Entry module not found: Error: Can't resolve 'index.js' 

webpack的入口点就像常规导入一样。这不是相对路径，因此webpack将其解析为模块，它会在node_modules中查找模块index.js。想必你希望它是：

entry: './index.js' 

固定，你会遇到下面的错误后：

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' 

你在你的WebPack配置使用babel-loader，但你没有它安装。那么你可能会安装它，但它不在你的package.json，所以你要么全球安装，要么你忘记分别在npm install上添加--save或--save-dev。无论哪种方式，它应该被列为您的package.json的依赖项，所以它也可以在另一台机器上运行，只需运行npm install即可。

相关babel-loader的依赖会产生同样的错误，这样你就可以一次安装所有他们：

npm install --save-dev babel-loader babel-core babel-preset-react 

最后，你可能会遇到的最后一个错误是：

Error: EACCES: permission denied, open '/bundle.js' 

你如果您以root用户身份执行它，或者您的用户被允许写入/（您的文件系统的根目录），则不会得到此信息。无论如何，你不需要这样做，因为生成的包应该在项目目录中的某个地方，否则多个项目将最终覆盖相同的包。你也设置output.path为/.，所以也许这是一个错字，你的意思是./。这是不允许的，因为output.path需要是一个绝对路径。你可以使用path.resolve。

output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname) 
} 

您通常希望output.path成为您项目中的一个目录，例如， dist因此您可以轻松地将输出与常规文件分开。

这里是上面提到的所有更改的完整配置：

const path = require('path'); 

module.exports = { 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react'] 
     } 
     } 
    ] 
    } 
};