我会使用webpack ts文件编译。
在webpack.config.js中：
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
taskpane: ["react-hot-loader/patch", "./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
commands: "./src/commands/commands.ts",
loginfile: "./src/login/loginfile.ts",
logoutfile: "./src/logout/logoutfile.ts",
},
output: {
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"],
},
module: {
rules: [
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src'), use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-typescript"],
},
},
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["react-hot-loader/webpack", "ts-loader"],
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
type: "asset/resource",
generator: {
filename: "assets/[name][ext][query]",
},
},
],
},
plugins: [
new DotenvWebpackPlugin({ path: `.env.${options.mode}` }),
new CopyWebpackPlugin({
patterns: [
{
from: "assets/*",
to: "assets/[name][ext][query]",
},
{
from: "manifest*.json",
to: "[name]" + "[ext]",
transform(content) {
if (dev) {
return content;
} else {
return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
}
},
},
],
}),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["taskpane", "vendor", "polyfills"],
}),
new HtmlWebpackPlugin({
filename: "loginfile.html",
template: "./src/login/loginfile.html",
chunks: ["loginfile"],
}),
new HtmlWebpackPlugin({
filename: "logoutfile.html",
template: "./src/logout/logoutfile.html",
chunks: ["logoutfile"],
}),
new HtmlWebpackPlugin({
filename: "endlogout.html",
template: "./src/taskpane/endlogout.html",
chunks: ["login", "vendor", "polyfills"],
}),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["commands"],
}),
new webpack.ProvidePlugin({
Promise: ["es6-promise", "Promise"],
}),
],
devServer: {
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
server: {
type: "https",
options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
},
port: process.env.npm_package_config_dev_server_port || 3000,
},
};
return config;
};当我运行npm run server时，我遇到了这个问题。
错误中的错误：子编译失败：未找到模块：错误：无法解析“/Users/**//summarizr 2/summarizr/src/login”中的“../loginfile.js”
未找到模块错误：未找到模块：错误：无法解析“/Users//*/summarizr 2/summarizr/src/login”中的“../loginfile.js”
与logoutfile相同
我的html文件我有这样的代码：
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script type="text/javascript" src="../loginfile.js"></script>
</head>我也试过使用<script type="text/javascript" src="./loginfile.js"></script>和src="loginfile.ts"
这是我的项目结构
├ src
│ ├ commands
│ │ ├ commands.html
│ │ ├ commands.ts
│ ├ constants
│ │ ├ authentication.ts
│ ├ login
│ │ ├ loginfile.html
│ │ ├ loginfile.ts
│ ├ logout
│ │ ├ logoutfile.html
│ │ ├ logoutfile.ts
│ ├ services
│ │ ├ commands
│ │ ├ common
│ ├ taskpane
│ │ ├ components
│ │ ├ endlogout.html
│ │ ├ index.css
│ │ ├ index.tsx
│ │ ├ login.html
│ │ ├ logoutcomplete
│ │ ├ taskpane.html
│ │ ├ urls.ts
├ tailwind.config.js
├ tsconfig.json
└ webpack.config.js在这种情况下，问题可能是什么？
为了简化问题：
我在src/test文件夹中有一个test.ts文件和test.html文件
在test.html文件中，我有：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" defer src="test.js"></script>
</head>
<body>
</body>
</html>我得到错误
- 未找到模块错误：未找到模块：错误：无法解析“/Users/*****/****/summarizr 2/summarizr/src/test”中的“./test.js”
但对我来说，test.js应该在dist文件夹中找到
2条答案
按热度按时间xkftehaa1#
你的问题有点模糊，你发布的HTML是模板还是在
dist或DOM中检查的实际输出HTML，所以这是基于一个关于实际模板内容的假设。html-webpack-plugin的目的是允许Webpack * 生成 * HTML，包括指向您的块的<script>行。在模板文件中的某个位置，看起来您正在尝试手工制作加载块的<script>标记。默认情况下，如果没有提供
template，HtmlWebpackPlugin将生成一个通用的HTML文件，并自动注入script标记。我可以看到，虽然你实际上确实需要
template功能，因为你正在添加一个额外的脚本标记，否则Webpack将没有上下文。在该模板中，您将添加额外的Office for JS脚本，但您 * 不会为块 * 添加任何脚本标记。
HtmlWebpackPlugin会将其注入到dist中输出的HTML文件中，以及dev服务器提供的HTML文件中。qmb5sa222#
您的login.js是一个js模块
<script type="module" src="../loginfile.js"></script>