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

}