我正在创建一个小型 reactjs 应用程序,它最终将生成一个 .js 文件(它基本上是一个聊天机器人前端应用程序,它与后端对话)。我创建了一个使用 的反应应用程序npx create-react-app
,并且我设计的一切都没有问题。
我还创建了一个webpack
强大的概念证明来生成 js 文件,这也很有效。长话短说,就是在webpack.config.js
文件中指定输出:
output: {
path: path.resolve(__dirname, "public"),
library: "StewieWidget",
libraryTarget: "umd",
umdNamedDefine: true,
filename: "[name].js"
}
现在,据我所知,生成的应用程序在后台使用了 react-scripts,而不是显式地使用 webpack。所以,我不知道如何让它“出现”并通过上面的配置。此外,在搜索 Google 时,我发现我可能会使用craco
,这就是我所做的。在阅读了它的配置之后,我发现,webpack 文档可以像这样注入:
const path = require('path');
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
webpack: {
configure: (webpackConfig, { env, paths }) => {
webpackConfig.entry = {
"mylib": './src/index.js'
}
webpackConfig.output = {
path: path.resolve(__dirname, "public"),
library: "mylib",
libraryTarget: "umd",
umdNamedDefine: true,
filename: "[name].js"
}
console.log(webpackConfig);
return webpackConfig;
}
},
devServer: {
port: 3000,
open: false
}
}
这显然不起作用,如果我启动应用程序,npm run start --verbose
我会看到它像这样挂起:
这不是很有帮助。该start
命令只是执行craco start
。
所以,我的问题是:
- craco che 是处理这个问题的最佳方法吗?
- 我应该直接使用 webpack 吗?如果是这样,对于我需要做的事情有什么好的教程(作为后端开发人员,webpack 一直是一个棘手的话题)
感谢帮助 !