Webpack無法解析全球安裝的babel或babel-loader

Question

我一直在嘗試一個新項目，並希望使用webpack和模塊來分割代碼。我已經安裝NPM之後安裝的WebPack如下 npm install -g webpack

npm install -g babel-cli babel-core babel-loader babel-presets-es2015

現在，在項目中，我創建了一個包含以下內容的新config.js文件。

module.exports = { 
    entry: './src/js/app.js', 
    output: { 
     filename: 'dist/js/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 

} 

不過，我總是得到一個錯誤說 ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader'

換句話說，如何使的WebPack解決全球範圍內安裝的軟件包？

Answer 1

終於搞定了。不知道這是否正確。但是， 這是我的項目安裝和工作方式。我想應該有更好的方式來設置模塊裝載機的預置。

my-project 
    src 
    js 
     entry.js 
     module1.js 
     module2.js 
    dist 
    index.html 
    js 
     bundle.js 

現在，我目前的config.js設置如下所示。

module.exports = { 

    resolve: { 
     fallback: '/usr/local/lib/node_modules' 
    }, 
    resolveLoader: { 
     fallback: '/usr/local/lib/node_modules' 
    }, 
    entry: './src/js/app.js', 
    output: { 
     filename: 'dist/js/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['/usr/local/lib/node_modules/babel-preset-es2015'] 
       } 
      } 
     ] 
    }, 

}