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