个人中心
gpt4 book ai didi

javascript - bundle.js 是如何将样式内容注入(inject)到 index.html 中的？

转载 作者：行者123 更新时间：2023-12-05 06:23:24 24 4
gpt4 key购买 nike

我正在阅读一本单页应用程序 (React) 的书，它描述了 bundler 的使用:

App.js

import React from 'react';
import './App.css';

export default function App() {
   ...
}

When you use the import keyword to declare a dependency on static content, the decision about how to handle the content is left to the development tools i.e webpack. For small files, the content will be included in the bundle.js file, along with the JavaScript code required to add the content to the HTML document. This is what happens with the App.css file that was imported

所以我在App.css中添加了一个样式来检查:

App.css 

testClass {
   background-color: red 
}

我可以看到 index.html 确实有一个包含 App.css 内容的样式元素。我将 bundle.js 文件复制到我的代码编辑器并尝试在 bundle.js 中搜索 testClass 关键字，没有任何结果。那么“内容将包含在 bundle.js 文件中”是什么意思呢？我的意思是如果它在那里，我应该能够看到一些 javascript 代码来操作 DOM API，如下所示:

var styleNode = document.createElement('style');
styleNode.styleSheet.cssText = 'testClass { background-color: red }';
document.getElementsByTagName('head')[0].appendChild(styleNode);

我简化了代码，但你明白了，如果内容将包含在 bundle.js 文件中，我至少应该可以在 bundle.js 中找到 testClass 关键字？那么 bundle.js 是如何将样式内容注入(inject)到 index.html 中的呢？

最佳答案

我假设您使用的是 create-react-app (默认情况下使用 webpack 进行 Assets 管理)

如果是这样的话……

  • 当您运行npm run build 时，样式标签不是从客户端注入(inject)的，而是从服务器注入(inject)的。
  • Webpack 使用插件系统生成资源。其中之一是 HtmlWebpackPlugin

根据文档。

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

If you have multiple webpack entry points, they will all be included with tags in the generated HTML.

If you have any CSS assets in webpack's output (for example, CSS extracted with the MiniCssExtractPlugin) then these will be included with tags in the element of generated HTML.

create-react-app 默认使用 MiniCssExtractPlugin(用于生产构建)。所以插入 <link>到 html 由 HtmlWebpackPlugin 处理

模板输入

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

HtmlWebpack 插件的输出

<!doctype html><html lang="en"><head><title>React App</title><link href="/static/css/main.b100e6da.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(c){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],Object.prototype.hasOwnProperty.call(i,t)&&i[t]&&a.push(i[t][0]),i[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(c[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),f()}function f(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==i[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},i={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return c[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=c,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var r=this["webpackJsonpcra-ejected"]=this["webpackJsonpcra-ejected"]||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;f()}([])</script><script src="/static/js/2.af205322.chunk.js"></script><script src="/static/js/main.be430d78.chunk.js"></script></body></html>

关于javascript - bundle.js 是如何将样式内容注入(inject)到 index.html 中的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58405326/

24 4 0
文章推荐： R错误覆盖不存在的文件
文章推荐： c# - 如何将默认值从 appsettings 设置为 API 模型上的属性
文章推荐： Git - 如何在分支之间移动提交
文章推荐： python-3.x - 如何运行计划的 AWS Lambda 函数，其中计划时间是一个参数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com