Webpack 如何在CRA项目中用包裹替换网页包？

我有一个CRA项目设置，它的工作良好。不过，我正在考虑将其弹出，并用Parcel.js替换Webpack。弹出后，我该怎么办？

src

文件夹中的

index.js

文件是我唯一需要的包裹文件吗

如果不弹出（要删除的文件更少），您的生活会更轻松。您也不需要网页包，包裹将是您的捆绑包

如果您的设置仍然接近CRA提供给您的现成设置，那么您需要做的就是：

卸载反应脚本：

$npm rm react scripts

安装包裹捆绑机：

$npm i-D包裹捆绑机

CRA和Parcel之间的一个关键区别是，在CRA中，您的条目始终是您的

src/index.js

，而

public/index.html

更像一个模板。在Parcel中，您可以使用任何.js文件作为条目，也可以使用任何.html文件，这非常棒。因此，将所有文件从

public

移动到

src

目录，您可以继续删除

public

文件夹，因为现在一切都是源代码。因为您的新条目是

index.html

，所以让它正确地指向文件

删除

index.html

中的模板变量

%PUBLIC\u URL%

，并直接指向文件。假设您将

index.html

和

file.ext

都放在

src

文件夹的根目录下，

href=“%PUBLIC\u URL%/file.ext”

应该变成

href=“/file.ext”

CRA会自动在html的末尾插入一个

标记，但在包裹中，您需要指定它，以便它知道要捆绑什么。因此，将

添加到身体标签文件的底部，就在

之前（如果您将其放在

#根
上方，它将不起作用）

将您的CRA

package.json

任务替换为包裹：

从更改脚本

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

到

包裹没有

弹出

，也没有执行

测试

。您的

start

和

build

命令都会将文件输出到您的

dist

文件夹，这就是为什么在构建之前删除它是一个好主意。另外，将

.cache

和

/dist

添加到

.gitignore

中

---

就这样。如果我遗漏了什么，请告诉我。

我还必须添加一个带有{“预设”：[“react app”]}的.babelrc文件，并安装预设：npm install--save dev babel preset react app我的项目使用typescript。此说明看起来很酷，但不适用于我的开箱即用：(

"scripts": {
  "start": "parcel src/index.html",
  "prebuild": "rm -rf dist/",
  "build": "parcel build src/index.html"
}