inject-inner-webpack-plugin中文文档

最新推荐文章于 2021-09-18 11:01:32 发布
最新推荐文章于 2021-09-18 11:01:32 发布
阅读量249 收藏
点赞数
分类专栏： webpack 文章标签： Webpack 插件 HTML 内部脚本 注入
原文链接：https://www.npmjs.com/package/inject-inner-webpack-plugin
版权

inject-inner-webpack-plugin

将内部脚本源注入HTML网页包插件输出的HTML文件的网页包插件

安装

npm install --save-dev inject-inner-webpack-plugin

示例

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectInnerWebpackPlugin = require('inject-inner-webpack-plugin');

module.exports = {
    entry: {
        index: './index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
        new InjectInnerWebpackPlugin(HtmlWebpackPlugin),
    ],
};
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <!-- 此脚本标记将被输出html中的内部源代码替换 -->
    <script src="./inner.js?__inline"></script>
  </head>
  <body>
  </body>
</html>

This will generate a file dist/index.html containing the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script>
        // inner.js捆绑内容
    </script>
  </head>
  <body>
      <script src="index.js"></script>
  </body>
</html>

webpack.config.js中的条目应该是Object。
仅处理具有模板选项的HtmlWebpackPlugin实例。

选项

必须将HtmlWebpackPlugin传递到第一个参数中，第二个参数是可选的，例如： 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

new InjectInnerWebpackPlugin(HtmlWebpackPlugin, {
    context: path.resolve(__dirname, '..'),
});

第二个参数的允许值如下：

名称类型默认值说明
context{String}:字符串Webpack Context如果使用src/inner.js？__inline这样的相对路径，则该路径将相对于上下文
isRemainBundle{Boolean}:布尔值false如果为true，则保留要输出的内部块。
scriptTag{Function}:函数``自定义内部内容输出
template{String&Array}:字符串&数组``指定要注入的模板
hys0452
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最全18个webpack插件
weixin_49473712的博客
07-31 555
何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。 Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。 Plugin 的特点 是一个独立的模块 模块对外暴露一个 js 函数 (prototype) compiler apply apply compiler web.
webpack-inject-plugin:一个webpack插件，用于将代码动态注入到包中
05-02
webpack-inject-plugin 一个webpack插件，用于将代码动态注入到包中。 您可以查看示例 用法 # webpack . config . js const InjectPlugin = require ( 'webpack-inject-plugin' ) . default ; module . exports = { // Other stuff in your webpack config plugins : [ new InjectPlugin ( function ( ) { return "console.log('Hello World');" } ) ; ] } ; 该webpack插件接受一个参数，该参数将返回要注入到捆绑包中的代码。 该函数是使用与加载程序相同的
inject-webpack-plugin:Webpack的依赖注入
05-13
webpack依赖注入插件 一个简单的webpack插件，用于注入依赖项。 安装 使用npm安装插件： $ npm install inject-webpack-plugin --save-dev 基本用法 在您的webpack.config.js import InjectWebpackPlugin from 'webpack-inject-plugin' ; export default { // ... plugins : [ new InjectWebpackPlugin ( { 'path/to/file' : 'path/to/another/file' , 'path/to/file.scss' : 'path/to/another/file.scss' , 'react' : 'replacing
webpack-plugin-inner-script:Webpack的插件
05-01
内部脚本Webpack插件 基本的 const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) const WebpackPluginInnerScript = require ( 'WebpackPluginInnerScript' ) ; module . exports = { entry : './index.js' , output : { path : __dirname + '/dist' , filename : 'index_bundle.js' } , plugins : [ new HtmlWebpackPlugin ( ) , new WebpackPluginInnerScript ( ) ] } normal < script type = "text
inject-html-webpack-plugin:将脚本标签和样式链接注入到您的html中
05-09
注入html-webpack-plugin 受启发，简单高效的Webpack插件可将脚本标签和样式链接注入到html中 安装 npm install inject - html - webpack - plugin -- save -- dev 用法 在您的webpack.config.js中添加插件 var InjectHtmlPlugin = require ( 'inject-html-webpack-plugin' ) module . exports = { entry : { index : "./index.js" } , module : { loaders : [ ... ] } , output : { path : './dist' ,
html-webpack-plugin插件
WYX15011474269的博客
02-25 937
Installation 使用 npm 安装这个插件 $ npm install html-webpack-plugin@2 –save-dev Basic Usage 这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置： 复制代码 var HtmlWebpac...
inject-inline-html-webpack-plugin:将内联脚本插入html-webpack-plugin生成的html文件中
04-19
yarn add -D inject-inline-html-webpack-plugin 然后在HtmlWebpackPlugin之后实例化插件，并在html-webpack-plugin配置中指定一个inlineScripts ： plugins: [new HtmlWebpackPlugin({ inlineScripts: ['some-...
html-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法
05-06
html-webpack-inject-attributes-plugin 添加自定义属性以注入标签 安装 npm install html - webpack - inject - attributes - plugin - D 用 请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。 添加到...
HtmlWebpackPlugin实现资源的自定义插入
weixin_34194087的博客
01-15 3302
目前碰到的问题 我们用html-webpack-plugin的inject属性去自动插入打包后的js, css到页面中，但是如果想给script标签添加一个crossorigin属性呢， 例如： &lt;script type="text/javascript" src="/static/js/debug.f04ad197.js"&gt;&lt;/script&gt; 想改为： &lt;sc...
【实战】Webpack Plugin开发
goodloving的博客
01-19 402
文章目录导读一、cdn常规使用二、开发一个webpack plugin三、cdn优化插件实现1、创建一个具名` JavaScript` 函数（使用`ES6`的`class`实现）2、在它的原型上定义 `apply` 方法3、指定一个触及到 webpack 本身的事件钩子4、在钩子事件中操作`index.html`5、设置`webpack`的`外部扩展externals`6、` callback`；四、cdn优化插件使用configureWebpack中配置：chainWebpack中配置：五、小结文章参考.
HTML处理——html-webpack-plugin
weixin_33937778的博客
08-31 163
前提说明 每次手动创建 HTML 文件来导入打包后的 JS，显然这种处理方式是不可取的。理想的处理方式应该是通过插件生成 HTML，这个生成的 HTML 文件自动导入打包后的 JS 文件。 这个时候用到的插件是：html-webpack-plugin。 下面只是介绍一些常见的用法，如果要更深入的去了解，建议查看 官网。 前期准备 首先贴出对应的模块 package.json： "scripts...
WebPack(III）
zhanghuali
07-07 235
在之前的webpack学习中，我们将打包好的js文件引入html文件都是手动的，那么如何自动的将打包好的js文件与项目中的html文件关联呢？那么我们来介绍一下插件plugin。一、安装plugin，我们在项目app-test下局部安装html-webpack-plugin，采用命令：npm install html-webpack-plugin --save-dev，安装成功显示信息为：...
18个常用的webpack 插件用法总结，值得你收藏！
前端达人
03-22 711
转自：掘金 - lzg9527https://juejin.cn/post/6844904193589772301何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定...
前端webpack-plugin详解
yunduanaoligei的博客
09-18 365
今天由云南仟龙Mark跟大家聊聊”前端webpack-plugin详解“这篇文章，文中知识点很实在，希望能对大家编程之路有所帮助，近期在react新项目中第一次使用了html-webapck-plugin插件，使用该插件的两种关键功效： 为html文件中导入的外界資源如script、link动态性加上每一次compile后的hash，避免引入缓存文件的外界文件难题 能够转化成建立html入口文件，例如单页面能够转化成一个html文件入口，配置N个html-webpack-plugin能够转化成N个页面入口拥
webpack 插件总结归类
weixin_33854644的博客
10-26 296
功能类 html-webpack-plugin 自动生成html，基本用法： new HtmlWebpackPlugin({ filename: 'index.html', // 生成文件名 template: path.join(process.cwd(), './index.html') // 模班文件 }) copy-web...
webpack插件html-webpack-plugin详解
热门推荐
itKingOne的博客
04-17 1万+
插件地址：https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载
webpack 插件之Html-Webpack-Plugin
小辣抓
08-13 1752
webpack 插件之Html-Webpack-Plugin1. 为什么我们需要这个插件先来看一个应用场景。 我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。于是我们在webpack.config.js里这样写了：const path = require('path'); module.exports = {
webpack 插件： html-webpack-plugin
weixin_33881753的博客
01-26 296
插件地址：https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些...
webpack 配置html,webpack 插件html-webpack-plugin的具体使用
weixin_33467061的博客
06-09 595
本文介绍了webpack 插件html-webpack-plugin的具体使用，分享给大家，具体如下：这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bund...
如何使用html-webpack-plugin
最新发布
02-06
首先，你需要在你的项目中安装html-webpack-plugin。这可以通过在命令行中运行以下命令来完成： ``` npm install html-webpack-plugin --save-dev ``` 然后，你需要在你的webpack配置文件中引入html-webpack-plugin并将其应用到你的配置中。这可以通过以下方式完成： ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... your other webpack config options here plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: './index.html' }) ] }; ``` 在上面的示例中，我们使用了一个模板文件（./src/index.html）并指定了一个输出文件名（./index.html）。在这里，你可以使用任何你喜欢的文件名和路径。 此外，html-webpack-plugin还有许多其他选项可供使用，如果你想要在生成的HTML文件中添加额外的功能，则可以使用这些选项。例如，你可以使用inject选项来控制webpack生成的资产是否自动注入到HTML文件中。 最后，在你的package.json文件中的scripts字段中，添加一条命令来运行webpack，就像这样： ``` "scripts": { "build": "webpack --config webpack.config.js" } ``` 现在，你可以在命令行中运行`npm run build`命令来生成你的HTML文件了。 希望这对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值