Webpack does not allow downloading babel or babel-loader globally

Question

I tried a new project and wanted to use webpack and modules to split the code. I installed npm and then installed webpack as follows npm install -g webpack

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

Now in my project, I created a new config.js file containing below content.

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

}

However, I always get an error message ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader'

In other words, how to get webpack to allow globally installed packages?

Answer 1

It finally happened. Not sure if this is the right way. However, this is how my project works and works. I believe that there should be a better way to install presets for module loaders.

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

}