Question

我正在阅读一本单页应用程序（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？

Answer 1

我假设您使用的是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>

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

1 个答案: