Webpack으로 외관을 자동으로 로딩

나는 약간의 검색을했으나 여기에 우아한 해결책이 있는지 궁금해하고있었습니다. Webpack 앱을 만들 때 jQuery, React, ReactDOM, Angular 또는 Bootstrap과 같이 컴파일/번들 할 필요가없는 종속성을 갖는 것이 일반적입니다. Webpack 구성 파일의 externals 개체에 이러한 파일을 나열 할 수 있지만 외부에서 런타임에 이러한 라이브러리를 네임 스페이스로 사용할 수 있다고 가정합니다.Webpack으로 외관을 자동으로 로딩

즉, externals 해시의 각 항목에 대해 HTML의 스크립트 태그를 사용해야합니다. 이것은 외부 CDN을 참조하는 경우 의미가 있지만, node_modules에있는 라이브러리에서 일부 dist 파일을 복사하는 것으로 자동화가 될 수 있다고 생각합니다.

나는 이것을하는 방법의 예제를 찾고 있었지만 아직 보지 못했습니다. 나는 external-loader을 망 쳤지 만 문서를 통합하는 행운을 얻지는 못했습니다 (문서는 완전한 예제를 제공하지 않는 것 같습니다).

기본적으로 이런 일이해야합니다 : resolve.alias에 추가되어야 번들로 제공해서는 안

라이브러리, 예를 {"react": "react/dist/react.js"}
public 디렉토리 (아마도 이것이 단지 file-loader와 함께 할 수 있을까?)
하는 HTML 로더 또는 어쩌면 플러그인이 bundle.js 스크립트 태그

전에 스크립트 태그를 삽입에 대한 로더 복사 DIST 파일

이와 같은 것이 존재하지 않으면 나는 그것을 만들려고 노력할 것입니다; 나는 누군가가 미리 구운 해결책을 알고 있는지 알기 위해 여기에 게시하고있다. 웹 앱을 만드는 것이 일반적인 문제 일 것 같아서 나는 뭔가를 놓치고 있다고 생각했다.

출처

2016-09-08 M Miller

기존 솔루션을 찾지 못했기 때문에 HtmlWebpackPlugin을 보완하기위한 플러그인을 작성했습니다. 외부 배열을 가져 와서 스크립트/링크 태그를 HTML 파일에 추가하고 외부 해시를 생성하며 CDN 또는 로컬 파일을 사용할 수 있습니다.

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

출처

2016-10-08 19:44:10

이 작업 샘플이 있습니까? jquery cdn을 추가하려고했지만 어디서나 index.html을 볼 수 없습니다. – lohiarahul

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

는 여기 아무것도 실종?

출처

2016-12-29 12:51:59 lohiarahul

Webpack으로 외관을 자동으로 로딩

답변

관련 문제