时间戳

首页 > 解决方案 > 如何命名 index.html 中包含的构建文件

webpack - 如何命名 index.html 中包含的构建文件

问题描述

我使用 create react app build 仅用于构建目的。我不使用按原样创建的 index.html。在最新版本的 create-react-app 之前，它用于创建单个 main.js 和 main.css，我可以将它们包含在我的自定义 main.html 中。但是现在在 index.html 中生成并嵌入了多个文件。有些是作为主要生成的。我可以从asset-manifest.json 获得。但有些是作为动态数字包含在内的。 

<!doctype html><html lang="en"><head><meta charset="utf-8"/>
<link href="/static/css/main.2cce8147.chunk.css" rel="stylesheet"></head><body>
<div id="root"></div>
<script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],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;a()}([])</script>
<script src="/static/js/2.b41502e9.chunk.js"></script>
<script src="/static/js/main.28647029.chunk.js"></script></body></html>

并在 manifest.json

"main.css": "/static/css/main.2cce8147.chunk.css",
"main.js": "/static/js/main.28647029.chunk.js",
"runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
"static/js/2.b41502e9.chunk.js": "/static/js/2.b41502e9.chunk.js",

而不是 2 个 js 文件 src="/static/js/2.b41502e9.chunk.js" 和 src="/static/js/main.28647029.chunk.js" ，我想构建以生成单个文件 main。 28647029.chunk.js 针对资产清单.json 文件中的 main.js 条目。

我已经弹出了构建。

标签： webpackcreate-react-app

解决方案

在 webpack.config.js 中只需更改

 splitChunks: {
    chunks: 'all',
    name: false,
  },

至

 splitChunks: {
    chunks: 'all',
    name: "abc",
  },

推荐阅读