electron-userland / electron-userland/electron-webpack

How i can use awesome-typescript-loader with electron-webpack?

Open
#158 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
902
Forks
168
PR merge metrics
No merged PRs in 30d

Description

Hello.
I'm trying bundling the my electron app through electron-webpack.
But electron-webpack is require ts-loader, because I use awesome-typescript-loader instead ts-loader:
```
ERROR in Entry module not found: Error: Can't resolve 'ts-loader' in '/media/ruut/MyDisk/Soft/Programming/ladProjects/ai/packages/app/desktop'

ERROR in multi ./src/main/index.ts
Module not found: Error: Can't resolve 'ts-loader' in '/media/ruut/MyDisk/Soft/Programming/ladProjects/ai/packages/app/desktop'
@ multi ./src/main/index.ts
```

My custom webpack config:
```
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const rootFolder = process.cwd();

module.exports = {
mode: 'development',
context: `${rootFolder}`,

entry: {
index: path.join(rootFolder, '/src/main/index.ts'),
vendors: ["react", "react-dom"]
},
output: {
path: __dirname + "/build/app/main",
filename: "[name].js"
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
modules: ["node_modules"],
extensions: [".ts", ".tsx", ".js", ".json"]
},

target: 'electron-main',

module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'awesome-typescript-loader',
options: {
configFileName: `${rootFolder}/config/tsconfig.json5`,
forceIsolatedModules: true,
useTranspileModule: true,
}
}
]
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},

plugins: [
new CleanWebpackPlugin(['build']),

new HtmlWebpackPlugin({
filename: path.resolve(rootFolder, 'build/app/index.html'),
template: path.resolve(rootFolder, 'src', 'index.html')
}),

new CheckerPlugin(),

new ForkTsCheckerWebpackPlugin()
]
};
```
electron-webpack config in package.json
```
"electronWebpack": {
"commonSourceDirectory": "src",
"title": true,
"main": {
"sourceDirectory": "src/main",
"webpackConfig": "config/webpack.config.main.js"
},
"renderer": {
"sourceDirectory": "src/renderer",
"webpackConfig": "config/webpack.config.renderer.js"
}
},
```

How I can use the awesome-typescript-loader with the electron-webpack?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.