Bundle js dependencies in package.json into a minified file without require calls in main file?

Question

I defined dependencies in package.json by calling node install ... -save for all the dependencies.

How can I easily combine these installed dependencies into a single js file without a main file that has require calls? I want to include this js file in an html file in the script tag.

It seems like an unnecessary task to require stuff when I already defined the package as a dependency...

Answer 1

Check webpack's DllPlugin https://webpack.js.org/plugins/dll-plugin/ and https://robertknight.me.uk/posts/webpack-dll-plugins/

An example webpack(v2) config:

const path = require('path')

const webpack = require('webpack')

module.exports = {
  devtool: 'source-map',
  entry: {
    vendor: [
      'react',
      'react-datetime',
      'react-dom',
      'react-redux',
      'react-router',
    ],
  },

  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve('./dist/'),
    library: '[name]_lib',
  },

  plugins: [
    new webpack.DllPlugin({
      path: 'dist/[name]-manifest.json',
      name: '[name]_lib',
    }),
  ],
}

You could automatically read your package.json rather then building that array manually, but I suggest knowing exactly what's being added to the bundle.