I would compile using webpack ts files.
In 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;
};
When I run npm run server I get this issue
ERROR in Error: Child compilation failed: Module not found: Error:
Can’t resolve ‘../loginfile.js’ in
‘/Users/*//summarizr2/summarizr/src/login’
ModuleNotFoundError: Module not found: Error: Can’t resolve
‘../loginfile.js’ in
‘/Users///summarizr2/summarizr/src/login’
samething with logoutfile
I html file I have this code:
<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>
I have also tried using <script type="text/javascript" src="./loginfile.js"></script> and src="loginfile.ts"
Here’s my project structure
├ 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
What could be the issue in this case ?
To simplify the question :
I have a test.ts file and test.html file in src/test folder
inside test.html file I have :
<!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>
I get error
- ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./test.js’ in ‘/Users/*****/****/summarizr2/summarizr/src/test’
But for me test.js should be found in dist folder
2
Answers
Your login.js is a js module
<script type="module" src="../loginfile.js"></script>Your question is a little vague about whether the HTML you posted is the template or the actual output HTML as inspected in
distor in the DOM, so this is based on a bit of an assumption about that being the actual template contents.The point of
html-webpack-pluginis to allow Webpack to generate the HTML, including the<script>lines pointing to your chunk. Where in your template file, it looks like you are trying to hand craft the<script>tag that loads the chunk.By default, with no
templateprovided,HtmlWebpackPluginwill generate a generic HTML file with thescripttag automatically injected.I can see though you actually do need the
templatefeature as you are adding an additional script tag that Webpack would otherwise have no context for.In that template, you will add your additional Office for JS script, but you will not add any script tag for the chunk.
HtmlWebpackPlugininjects that for you in the outputted HTML files inside ofdistand also those served by the dev server.