mmiller42 / html-webpack-externals-plugin Goto Github PK

View Code? Open in Web Editor NEW

99.0 99.0 16.0 503 KB

Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.

License: MIT License

JavaScript 100.00%

externals html-webpack-plugin webpack webpack-plugin

html-webpack-externals-plugin's People

Contributors

Stargazers

Watchers

Forkers

isczhao norangit mastilver sittingbool nvdnkpr leocardoso94 jordanfarnworth nicholi phollome apekarawang line0 pipeng119 porunacabeza dmchurch gavinxgu

html-webpack-externals-plugin's Issues

Main entry not injected

Hi, I tried this plugin with webpack 4, but the main entry not injected.

Support cross-origin attribute to CDN URLs

I'm using this plugin to specify that React will be loaded from a CDN, like so:

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'react',
      entry: 'https://unpkg.com/[email protected]/dist/react.min.js',
      global: 'React'
    },
    {
      module: 'react-dom',
      entry: 'https://unpkg.com/[email protected]/dist/react-dom.min.js',
      global: 'ReactDOM'
    }
  ]
}),

It would be nice if I could specify a new option, like "crossOrigin": true that could add the attribute "cross-origin" to the script tag.

To understand how that is important:
https://twitter.com/dan_abramov/status/893099358484353024

I tried to use this plugin: https://github.com/dentuzhik/html-webpack-crossorigin-plugin
But it adds the attribute to all the <script> tags and I think that's not ideal.

Using the configuration mentioned here https://www.npmjs.com/package/html-webpack-externals-plugin#example , I'm getting an extra slash at the beginning of the of the or <script> tag.
.e.g - <link href="https://_SOME_URL" >
becomes
<link href="/https://_SOME_URL" >

with an extra slash before the https.. any idea or thoughts?

found the issue.. it was because of the publicPath of config.output.. is there anyway for this configuration to now affect the html-webpack-externals-plugin ?

Usage for files outside node_modules?

Hi, is there a way to make this plug-in work for my own files, that are not in node_modules?

For example:
I have some configuration data files in app/js/config/
I want these files to be excluded from all bundles, copied to the output (dist) folder and read from there at runtime, which is exactly what this plug-in does, but for files in node_modules.

I managed to get it to copy a test file and insert the script tag in index.html, but the contents of the test.js file is still bundled and read from there. Here's my experimental config:

new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'test',
entry: '../../js/config/test.js',
global: 'test',
},
],
})

Any help will be greatly appreciated!

Could add types definition in DefinitelyTyped?

I'm using webpack.config with typescript (webpack.config.ts) and I can't find the types definition for this package.

Accurate path?

Why can't we achieve the precise path through the way of outputPath:'static/js/[name].js'?

example：

new HtmlWebpackExternalsPlugin({
externals: [{
module: 'jquery',
entry: 'jquery/dist/jquery.min.js',
global: 'jQuery',
}, ],
outputPath: 'static/js/[name].js'
}))

insert：

Support context in CopyWebpackPlugin

Please add a context attribute to the CopyWebpackPlugin. In my case I need to change the node_modules path.

unable to resolve the external "path" of an existing file...

Hello,

When I try to compilate, I meet the following error :

"Unable to resolve the external path /server/app/src/deps/file.js"

Whereas the file does exist in this folder.

here is the part of the configuration :

new HtmlWebpackPlugin({ template: './src/public/index.html', chunksSortMode: 'dependency', lib: ['sockjs-client', 'sockjs-event'] })

new HtmlWebpackExternalsPlugin([ { name: 'sockjs-client', var: 'sockjs-client', path: __dirname + '/deps/sockjs-client.js' }, { name: 'sockjs-event', var: 'sockjs-event', path: __dirname + '/deps/sockjs-event.js' } ])

Anyone has a clue of the reason why it doesn't work properly ?

(configuration : node v6.9.4 + npm 4.6 + webpack 2.6)

Support SRI

I'm injecting CDN URLs with this plugin and want to add subresource integrity attribute to scripts as well.

Desperately needs unit tests

At a minimum, translate the examples in the readme into tests.

bootstrap.js must need global?

code:

new HtmlWebpackExternalsPlugin({
        externals: [
          {
          //   module: 'jquery',
          //   entry: '//unpkg.com/[email protected]/dist/jquery.min.js',
          //   global: '$',
          // }, {
            module: 'bootstrap.min.js',
            entry: {path: '//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js', type: 'js'},
          }, {
            module: 'bootstrap.min.css',
            entry: {path: '//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css', type: 'css'},
          // }, {
          //   module: 'react',
          //   entry: {path: '//cdn.bootcss.com/react/0.14.8/react.min.js', type: 'js'},
          //   global: 'React'
          // }, {
          //   module: 'react-dom',
          //   entry: {path: '//cdn.bootcss.com/react/0.14.8/react-dom.min.js', type: 'js'},
          //   global: 'ReactDOM'
          }
        ],
        files: ['../../../view/front/test_index.html', '../../../view/front/test_detail.html'],
      })

error:
ERROR in chunk test_index_renderer [entry]
js/[name].bundle.js
Cannot read property 'var' of null
Child html-webpack-plugin for "../../../view/front/test_index.html":
+ 3 hidden modules
Child html-webpack-plugin for "../../../view/front/test_detail.html":
+ 3 hidden modules

question:
option.externals[].global: For modules without an export (such as CSS), omit this property or use null, js such as bootstrap.min.js alse need global?

Inject external file many times

I have many entries and each entry need to inject an external javascript called aepmod.js (just like a CDN jquery), but I got wrong times of injection in my dist folder.

The first file gets one inject.
The second one gets two,
The third one gets three
.....
The last one gets many times (The times depend on the order of my file)!

Following is my webpack production config:

And the path in 'externals' config represents the URL of aepmod.js

Use Node module resolution algorithm

Currently paths are manually resolved relative to the node_modules directory in the project root. This doesn’t work when the module is installed in the parent directory, which might be the case in instances such as Yarn’s workspace configuration for monorepos. Infer the module’s location instead via the resolution algorithm which traverses up the directory tree.

Ability to specify where the entry should be injected ( <body>, <head>, or others )

Just like html-webpack-plugin that can specify where the entry should be injected, it could be nice to also have that ability on each module.

    new HtmlWebpackExternalsPlugin({
      externals: [{
        module: 'vue',
        entry: {
          path: 'https://unpkg.com/vue',
          type: 'js',
          inject: 'body' | 'head' | 'openingBody' | 'closingBody'
        }
      }]
    }),

How to reference a node_module in the compiled bundle

In my electron project, I've an internal node_modules folder whose all dependencies have been under externals in webpack and they are directly reference by var dep = require('dep'). When the webpack script is run in prod mode, a physical built file is generate that can easily reference the dependencies from any available node_modules.

But in webpack dev mode, I'm using html-webpack-plugin, which creates html file in memory and it never references those externals.

I want to specify that node_modules to this plugin so that all un-resolved dependencies can be looked into this folder as well.

Altering css-files array while accessing it changes accessed indexes

Line 150 (current version):

//make sure that the order of lib css before the css of module for( i = 0, len = extractedCss.length; i < len; i++ ){ extractedCss[i] = Object.assign({}, pluginArgs.head.splice(extractedCss[i], 1)[0]); // <<< this Line } pluginArgs.head = extractedCss.concat( pluginArgs.head ); callback();

This will alter the indexes of the pluginArgs.head array while you try to access the indexes in that order which results in accessing the wrong and also empty indexes. This caused my html to have an empty tag and the last two css files have been added to the body instead of the head-section.

Add support for Webpack 3.0

[email protected] requires a peer of webpack@^2.0.0 but none was installed.

when multiple html files are import external automatically according to the import situation

Usually an application will have a lot of pages, so it is not possible to use files specify a page will append which external resource. if have a way to import externals automatically according import situcation in src files.

for example, one file (admin.html) need react,moment, another only need react(help.html). i configed all externals in plugin options. in build file, admin.html have react,moment scripts and help.html only react script.

this is me how to config webpack entry and html-webpack-plugin:

var pages = glob.sync('*.page.js', {cwd: cwd + '/src/pages', matchBase: true});
var entry = {};
var htmls = [];
pages.forEach((item) => {
    let chunk = 'pages/' + item.slice(0, 0 - '.page.js'.length);
    entry[chunk] = ['./src/pages/' + item];
    htmls.push(new HtmlWebpackPlugin({
        filename: path.resolve('./build') + '/' + item.slice(0, 0 - '.page.js'.length) + '.html',
        template: path.resolve(cwd, 'src/htmls/index.html'),
        chunks: [chunk],
        hash: true
    }))
});
//... more code

Assets insert position

I used latest version of your plugin, I find the externals are inserted before chunks assets. Can you implement an option to specific insert position?

force external to use <link>

please provide some option (type: 'link' or link: true ..) to support externals that do not end in .css like:

https://fonts.googleapis.com/css?family=Material+Icons

currently using workaround:

https://fonts.googleapis.com/css?family=Material+Icons&.css

attributes passed to wrong tag

if I include a favicon in the HtmlWebpackPlugin options the attributes are passed to the favicon instead to the external module in which I originally defined them in

missing directory lib in npm package

version 3.3.1

missing lib directory after install, so require('html-webpack-externals-plugin') will fail.

reproduce:

$ npm install html-webpack-externals-plugin
$ ls node_modules/html-webpack-externals-plugin
LICENSE  README.md  package.json  src

Cache busting assets via [hash] or [chunkhash] rather than query parameter

As I understand, using a query parameter to cachebust assets (e.g. bootstrap.min.css?1337) is the Webpack 1 way. Webpack 2 switched to renaming assets files to include a hash via variable [hash] or [chunkhash] (e.g. 'boostrap.min.[chunkhash].css' becomes boostrap.min.1337.css).

Could you update this plugin to support the use of [hash] and [chunkhash] in the 'entry' field under 'externals'?

NPM audit fails with moderate vulnerability

Hey,
npm audit currently shows a moderate vulnerability for your package html-webpack-externals-plugin, because of a vulnerability in the serialize-javascript package within the copy-webpack-plugin package. Maybe you should consider updating either the copy-webpack-plugin package or the serialize-javascript package to resolve this.

npm audit output:

Moderate Cross-Site Scripting
Package serialize-javascript
Patched in >=2.1.1
Dependency of html-webpack-externals-plugin
Path html-webpack-externals-plugin > copy-webpack-plugin >
serialize-javascript
More info https://npmjs.com/advisories/1426

Chrome reported some library "is not defined" when using CDN

Hi I want to use CDN for my production build. Although I can load jQuery (as your example shows), some library was reported "not define", e.g. I want to load ztree use CDN and I use like this

    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'ztree',
          entry: 'https://cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.all.min.js',
          global: 'ztree'
        },
      ],
    }),

In my vue code import zTree from 'ztree'

When I opened my page, Chrome reported: So what did I do wrong here ?

bootstrap cff876d6b8365dfe7db2:146 ReferenceError: ztree is not defined
at Object.jbSp (external "ztree":1)
at t (bootstrap cff876d6b8365dfe7db2:54)
at Object.8Yog (tree.js:1602)
at t (bootstrap cff876d6b8365dfe7db2:54)
at Object.PhPB (noQuestion_bg.png:1)
at t (bootstrap cff876d6b8365dfe7db2:54)

The external ztree only has codes

module.exports = ztree;

//////////////////
// WEBPACK FOOTER
// external "ztree"
// module id = jbSp
// module chunks = 25

externals copied more times

a part of config below:
HtmlWebpackPlugin {
options:
{ template: '/xxxxx/first/index.html',
filename: 'first.html',
.....
} },
HtmlWebpackPlugin {
options:
{ template: '/xxxxx/second/index.html',
filename: 'second.html',
.....
} },
HtmlWebpackExternalsPlugin {
externals: [
{
module: (function(){console.log('react'); return 'react'}()),
entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
global: 'React',
}]
}

The output file:
firest.html

<title>First</title>

second.html

<title>Second</title>

The second.html repeat call HtmlWebpackExternalsPlugin.
if I have the third.html config ,the external file will appear three times in third.html.
I've on idea how to get the right file.

Consider updating to html-webpack-tags-plugin

Hi @mmiller42,

Just thought I'd write a quick message to let you know that html-webpack-include-assets-plugin plugin has been renamed to html-webpack-tags-plugin.

Also, a bunch of new features were added, including built-in support for externals which may be of interest since you have a similar feature in this plugin.

There's also the html-webpack-deploy-plugin plugin built on top of it that provides some nice features for deploying/including assets from node_modules packages.

Obviously feel free to ignore these plugins/changes, but I'd be happy to help if you have any questions about upgrading.

Cheers!

ReactDom is not defined

hello everyone, i have a question that i imort react and set externals, but also has error
import React from 'react'
import ReactDom from 'react-dom'

new HtmlWebpackExternalsPlugin({
externals: [{
module: 'react',
entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
global: 'React',
},
{
module: 'react-dom',
entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
global: 'ReactDom',
}],
})

but also console error

external "ReactDom":1 Uncaught ReferenceError: ReactDom is not defined
at Object. (external "ReactDom":1)
at n (bootstrap:19)
at Module. (index.js:89)
at n (bootstrap:19)
at bootstrap:83
at bootstrap:83

Unmet dependency warning on installed package.

npm WARN [email protected] requires a peer of html-webpack-plugin@^2.0.0 but none was installed.
is shown as an error everytime i run a command on npm. but then I do have an html-webpack-plugin package installed in my project.

my dependencies being:

"devDependencies": {
    "autoprefixer": "^8.6.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.1.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-externals-plugin": "^3.8.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "optimize-css-assets-webpack-plugin": "^4.0.2",
    "popper": "^1.0.1",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.6",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "@material/top-app-bar": "^0.36.1",
    "classnames": "^2.2.6",
    "gentelella": "^1.4.0",
    "history": "^4.7.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router": "^4.3.1"
  }

Can not work when set webpack config of output public path

The html-webpack-plugin will prepend the public path to all chunk files when set public path.

How to use with Typescript?

Hi,

I'm trying to incorporate this into my production build. I am externalizing React and React-DOM from my local node_modules. When I go to see index.html in the browser, I get require() is not defined, React is not defined, etc.

AFAI understand, externalizing these libs means that in my code, I don't have to import them, since the libraries will be included in <script> tags in my index.html. Now, I want to be able to develop as usual. In my React files, I am importing React, ReactDom, and tons of other things. When I go to build, TypeScript says that I need to import, or Webpack won't go through with the build. I tried setting module: none in my tsconfig, but that means I won't be able to import anything ever.

How can I get this to work?

webpack.config.prod.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const externals = [
  {
    module: 'react',
    entry: 'cjs/react.production.min.js',
    global: 'React',
  },
  {
    module: 'react-dom',
    entry: 'cjs/react-dom.production.min.js',
    global: 'ReactDOM',
  },
];

module.exports = [
  {
    mode: 'production',
    entry: path.resolve(__dirname, 'src/app.ts'),
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.ts?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            configFile: path.resolve(__dirname, 'tsconfig.json'),
          },
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    target: 'node',
    externals: [nodeExternals()],
  },
  {
    mode: 'production',
    entry: path.resolve(__dirname, 'src/client/index.tsx'),
    output: {
      filename: '[name].[contentHash].bundle.js',
      path: path.resolve(__dirname, 'dist/public'),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            configFile: path.resolve(__dirname, 'src/client/tsconfig.json'),
          },
        },
        {
          test: /\.css$/,
          use: ['css-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.css'],
    },
    target: 'web',
    optimization: {
      minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '[name].[contentHash].css' }),
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'src/client/public/index.html'),
        // minify: {
        //   removeAttributeQuotes: true,
        //   collapseWhitespace: true,
        //   removeComments: true,
        // },
      }),
      new HtmlWebpackExternalsPlugin({ externals, hash: true }),
    ],
  },
];