Html-script-entry-webpack-plugin NPM

html-script-entry-webpack-plugin

使用

# install
npm install html-script-entry-webpack-plugin;

webpack:

// webpack.config.js
const HtmlScriptEntryWebpackPlugin = require('html-script-entry-webpack-plugin')

{
	...
	plugins: [
	  new HtmlWebpackPlugin(),
	  new HtmlScriptEntryWebpackPlugin()
	]
	...
}

解决问题

当我们机遇import-html-entry去解决前端模块化的问题时(比如 qiankun)，加载html后需要知道那个脚本是我们入口文件

工作原理

基于html-webpack-plugin，在处理钩子afterTemplateExecution时根据package.json中name比较headTags下的脚本文件，为入口文件scriptTag添加entry:true,编译后html：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>Document</title>
    <script defer="defer" src="/static/js/struct-app.js" entry></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

html-webpack-plugin

@infinitebrahmanuniverse/nolb-html-s @everything-registry/sub-chunk-1868

0.0.1

2 years ago