Автоматическая загрузка внешних файлов с помощью Webpack

Question

Я сделал несколько поисков, но мне было интересно, есть ли здесь элегантное решение. При создании приложения Webpack обычно имеют зависимости, которые не нужно компилировать/вставлять, например, jQuery, React, ReactDOM, Angular или Bootstrap, чтобы назвать несколько. Вы можете перечислить их в конфигурационном файле Webpack в объекте externals, но externals просто предполагает, что эти библиотеки будут доступны в виде глобальных пространств имен во время выполнения.

Это означает, что для каждой записи в вашем externals хеш вам также нужно подбрасывать тег скрипта в свой HTML. Это имеет смысл, если вы ссылаетесь на внешний CDN, но я думаю, что это может быть автоматизировано, если все, что вы хотите сделать, это скопировать некоторый файл dist из библиотеки в node_modules.

Я искал примеры того, как это сделать, но я еще не видел. Я перепутал с external-loader, но мне не удавалось интегрировать его (документация, похоже, не дает полного примера).

По существу, это должно было бы произойти:

1. Библиотеки, которые не должны быть в комплекте должны быть добавлены к resolve.alias, например, {"react": "react/dist/react.js"}
2. грузчиком копирует DIST файлы в общий каталог (возможно, это может только быть сделано с file-loader?)
3. HTML-загрузчик или, возможно, плагин вставляет теги сценария перед bundle.js в тег сценария

Если что-то вроде этого не существует, я могу попытаться его создать; Я просто размещаю это здесь, чтобы узнать, может ли кто-нибудь знать о предварительно искушенном решении, поскольку, похоже, это была бы общая проблема для создания веб-приложений, и я подумал, что, вероятно, что-то не хватает.

Answer 1

Я не нашел ранее существовавшего решения, поэтому я написал плагин для дополнения HtmlWebpackPlugin. Он принимает массив внешних элементов и добавляет теги сценария/ссылки в HTML-файл, генерирует хэш externals и может использовать CDN или локальные файлы.

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() 
 
    ] 
 
};

Я пропускаю здесь что-нибудь?