1. Adding the webpack-package
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader sass-loader sass webpack webpack-cli
2. Make 'webpack.common.js' in root directory and write through following code
<make file> (through visual code)
code webpack.common.js<webpack.common.js>
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/js/main.js',
devtool: 'inline-source-map',
target: 'electron-renderer',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env', {
targets: {
esmodules: true
}
}],
'@babel/preset-react']
}
}
},
{
test: [/\.s[ac]ss$/i, /\.css$/i],
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
}
]
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'build', 'js'),
},
};
3. modifying file
<package.json>
"scripts": {
"start": "electron-forge start",
"watch": "webpack --config webpack.common.js --watch", // modified
"test": "echo \"Error: no test specified\" && exit 1",
"package": "electron-forge package",
"make": "electron-forge make"
},
4. Run watch (on the first Terminal window)
npm run watch
5. modifying file
<index.html>
<body>
<script src="./build/js/app.js"></script> // modified
<div id="root"></div>
</body>
6. Run start (on the second Terminal window)
npm run start
7. Make React component and modifying some file
<make file> (through visual code)
code src/js/app.js<app.js>
import React from 'react';
export default function App() {
return(
<h1>I am App Component</h1>
)
}</src/js/main.js>
import React from 'react';
import ReactDom from 'react-dom';
import App from './app.js'; // modified
ReactDom.render(<h2>Hello React App</h2>, document.getElementById('root'))
ReactDom.render(<App/>, document.getElementById('root1')) // modified<main.html>
<body>
<script src="./build/js/app.js"></script>
<div id="root"></div>
<div id="root1"></div> // modified
</body>- Reload (ctrl+R)
8. Finally, compare it with your root directory
'Basic Development > Electron' 카테고리의 다른 글
| 4. The easy way to create a project (0) | 2023.12.31 |
|---|---|
| 2. Adding react package and practice (0) | 2023.12.31 |
| 1. Let's Practice through a simple example (Quick start from electron) (0) | 2023.12.31 |
| 0. What is the Electron? (0) | 2023.12.31 |
