bundle.js如何将样式内容注入index.html？

问题描述 投票：0回答：1

我正在阅读一本单页应用程序（React）书，该书将捆绑程序的用法描述为：

App.js

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

export default function App() {
   ...
}

[当您使用import关键字声明对静态内容的依赖性时，有关如何处理内容的决定留给开发工具（即webpack）。对于小文件，内容将与将内容添加到HTML文档所需的JavaScript代码一起包含在bundle.js文件中。这就是导入的App.css文件会发生的情况

所以我在App.css中添加了样式以进行检查：

App.css

testClass {
   background-color: red 
}

我可以看到index.html的样式元素确实包含App.css的内容。我将bundle.js文件复制到我的代码编辑器中，并尝试在testClass中搜索bundle.js关键字，没有任何东西。那么“内容将包含在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如何将样式内容注入index.html？

javascript webpack bundle single-page-application
1个回答
0
投票

我假设您使用的是create-react-app（默认情况下，使用webpack进行资产管理）

如果是这种情况...

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

    • 根据文档。

HtmlWebpackPlugin简化了HTML文件的创建，可为您的webpack捆绑包。

该插件将为您生成一个HTML5文件，其中包括您的所有使用脚本标签将webpack捆绑在主体中。只需将插件添加到您的webpack配置如下：

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

这将生成包含以下内容的文件dist / index.html：

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

如果您有多个Webpack入口点，则将它们全部包括在内带有生成的HTML中的标签。

如果您在webpack的输出中有任何CSS资产（例如CSS用MiniCssExtractPlugin

提取），然后将其包含在内在生成的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.