I have been utilizing Webpack in conjunction with TypeScript, HTML, and SCSS to develop a project. My goal is to create a single page application that incorporates a router located within the root folder of the project /framework/, with all my source code residing in the /src/ directory. However, I encountered an issue when navigating into subfolders (e.g. /src/pages/home/index.ts) where I found myself needing to repetitively use
import * as framework from '../../../framework/';// File: /webpack.dev.config.js
resolve: {
alias: {
framework: path.resolve(__dirname, './framework') // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect.
}
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProvidePlugin({
framework: [path.resolve(path.join(__dirname, 'framework')), 'framework']
})
],
However, none of these worked. I also experimented with the following:
// File: /src/index.ts
const path = require('path');
global.fw = String(path.resolve(__dirname, "framework"));
In TypeScript, this approach threw me an error stating
fs: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017)Is there a way for me to simplify my import statements to something like
import * as framework from '@framework';import * as framework from '@framework/main';