Automatically download external files using Webpack

Question

I did a few searches, but I was wondering if there is an elegant solution here. When creating Webpack applications, they usually have dependencies that do not need to be compiled / inserted, for example, jQuery, React, ReactDOM, Angular or Bootstrap, to name a few. You can list them in the Webpack configuration file in the object externals, but the external ones simply assume that these libraries will be available as global spaces with names at runtime.

This means that for each entry in the hash, externalsyou also need to add a script tag to your HTML. This makes sense if you are referencing an external CDN, but I think it can be automated if all you want to do is copy some dist file from the library to node_modules.

I was looking for examples of how to do this, but I have not seen it yet. I mixed up the external-loader , but I was not able to integrate it (the documentation does not seem to give a complete example).

Essentially, this should happen:

• Libraries that should not be linked should be added to resolve.alias, for example.{"react": "react/dist/react.js"}
• The loader copies the dist files to a shared directory (perhaps this can only be done using file-loader ?)
• HTML loader or plugin inserts script tags before bundle.js script tag

If something like this does not exist, I can try to create it; I just post it here to find out if anyone can know about a pre-sophisticated solution, since it seems like this would be a common problem for building web applications, and I decided there was probably something missing.

Answer 1

I did not find a pre-existing solution, so I wrote a plugin to complement HtmlWebpackPlugin. It takes an array of external ones and adds script / link tags to the HTML file, generates an externals hash code and can use CDN or local files.

https://github.com/mmiller42/html-webpack-externals-plugin

Answer 2

var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    entry: {
        'index-ref': './app/index-ref.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts',
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
          {
              test: /\.ts$/,
              loaders: ['awesome-typescript-loader', 'angular2-template-loader']
          },
          {
              test: /\.html$/,
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
              loader: 'file?name=assets/[name].[hash].[ext]'
          },
          {
              test: /\.css$/,
              exclude: helpers.root('app'),
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
          },
          {
              test: /\.css$/,
              include: helpers.root('app'),
              loader: 'raw'
          }
        ]
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: ['app', 'vendor', 'index-ref']
      }),

      new HtmlWebpackPlugin({
          filename: '../index.html',
          template: 'template' + '/default.html',
          lib: ['jQuery'],
          chunks: ['entry-name']
      }),
      new HtmlWebpackExternalsPlugin([
        // Using a CDN for a JS library 
        {
            name: 'jquery',
            var: 'jQuery',
            url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js'
        }
      ],
      {
          basedir: 'node_modules',
          dest: 'lib'
      }),

          new WebpackNotifierPlugin()
    ]
};

Hide result

- ?