How to include node_modules using webpack?

Question

In my angularJs 1.3 application, earlier I was using bower and grunt and it was working fine. I was adding files in my index.html like the following screenshot. But now I have installed all the packages using NPM and using WEbPack 4.21.0 for bundling and run the application. But now if I remove the packages link from Index.html file my application stops working. But I don't want all those links in Index.html and just want to generate a bundle file from those files. Kindly guide me how can I achieve this? Currently, its just adding angular.js file and few other files in vendor.js.

Index.html

Package.json

webpack.config.js

Updated Question:

Now i am using following webpack.config.js but its creating bootstrap_and_some_plugin.css.js . It has to create css file but don't know why it's creating js file?

module.exports = {
  context: __dirname + '/app/scripts',
  resolve: {
    modules: ['bower_components', 'node_modules'],
    alias: {
      bower_components: __dirname + '/app/bower_components',
      assets: __dirname + '/app/assets'
    },
    extensions: ['.js', '.jsx', '.css']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }]
      }
    ]
  },
  entry: {
    app: './main-app.js',
    'bootstrap_and_some_plugin.css': [
      'bower_components/font-awesome/css/font-awesome.css',
      'bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css',
      'bower_components/angular-ui-tree/dist/angular-ui-tree.min.css',
    ]
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/app/scripts',
    //chunkFilename: '[id].[chunkhash].js',
  },
  devServer: {
    contentBase: './app',
    host: 'localhost',
    port: '9000',
    inline: true,
    compress: true,
    proxy: {
      '/api/**': {
        //target: 'http://10.189.1.159:8080',
        target: 'http://localhost:9100',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      }
    },
    open: true
  },
  plugins: [

  ]
};

Solution

In the file webpack.config.js, you add this property inside the resolve property:

resolve: {
    alias: {
        bower_components: __dirname + '/app/bower_components'
    }
}

In the file main-app.js, if you want to use some js file, you call like this:

require('bower_components/jquery/dist/jquery.js');
require('bower_components/angular/angular.js');
require('bower_components/bootstrap/dist/js/bootstrap.js');
// ...

You need to specify the path of the file webpack.config.js. In my example, all the path looks like:

your_project
    webpack.config.js
    app
        bower_components
            jquery
                ...
            angular
                ...
            bootstrap
                ...

__dirname refers to the current path of the js file which is using it. If you use __dirname inside the webpack.config.js file, it will render your_project. Or using it inside jquery.js, it will render your_project\app\bowser_components\jquery\dist.

Then, build to bundle.js file and delete all the path in the Index.cshtml file.

Hope this helps!

UPDATE: If your js target file goes too big. You can split modules to multiple parts, like this:

entry: {
    'bootstrap_and_some_plugin.css': [
        './app/bower_components/bootstrap/dist/css/bootstrap.min.css',
        './app/bower_components/some-plugin/css/some-plugin.css'
    ],
    'jquery_and_angular.js': [
        './app/bower_components/jquery/dist/jquery.js', 
        './app/bower_components/angular/angular.js'
    ],
    'site.js': ['./js/site']
}

Then, in your Index.cshtml:

<link href="bootstrap_and_some_plugin.css" rel="stylesheet" />

<!-- body content -->

<script src="jquery_and_angular.js"></script>
<script src="site.js"></script>

UPDATE 2: You need to install the 2 packages babili-webpack-plugin and extract-text-webpack-plugin

In the file webpack.config.js:

// define these variables before "module.exports"
var BabiliPlugin = require('babili-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {...};

Then, setting the pluggin options:

plugins: [
    new BabiliPlugin({}, { test: /\.js$/, comments: false }),
    new ExtractTextPlugin('[name]'),
    ... and other options
]

and the output options:

output: {
    filename: '[name]',
    ... and other options
}

Comments

[Manjit]

I have added .js in main-app.js as described by you.Now now my app.js file size goes upto 3.51 MB. How can i make chunks of that file?

[Tân]

@Manjit I've updated my answer for your question. Please check again!

[Manjit]

Thanks for the reply and your reply is really helpful for me but can you please check my updated question. It's creating bootstrap_and_some_plugin.css.js file instead of cs file. Can you please tell me what's wrong i am doing?

[Tân]

@Manjit Done for your question, please check!

[Manjit]

It's generating bootstrap_and_some_plugin.css but app file without js extension and there is js code in bootstrap_and_some_plugin.css file.