如何加载一个本地文件使用，电子和webpack？
加载本地文件使用Electron和Webpack的步骤如下：
- 首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。
- 创建一个新的Electron项目，并初始化一个新的npm包。在命令行中执行以下命令：mkdir my-electron-app cd my-electron-app npm init -y
- 安装Electron和Webpack作为开发依赖项。在命令行中执行以下命令：npm install electron webpack webpack-cli --save-dev
- 创建一个名为
main.js的主进程文件，并在其中编写Electron应用程序的代码。例如，以下代码创建一个简单的Electron窗口：const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html')}
app.whenReady().then(createWindow)
- 创建一个名为
index.html的HTML文件，作为Electron窗口的渲染进程。在该文件中，你可以使用Webpack来加载本地文件。例如，以下代码使用Webpack加载一个本地的CSS文件：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Electron App</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <h1>Hello, Electron!</h1> </body> </html> - 创建一个名为
styles.css的CSS文件，并将其放置在与index.html相同的目录下。在该文件中，你可以编写自定义的CSS样式。 - 配置Webpack以处理CSS文件。在项目根目录下创建一个名为
webpack.config.js的文件，并添加以下代码：const path = require('path')
module.exports = {
entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }}
- 创建一个名为
index.js的JavaScript文件，并将其放置在与index.html相同的目录下。在该文件中，你可以编写与Webpack相关的代码。例如，以下代码将styles.css文件导入到index.js中：import './styles.css' - 在
package.json文件中添加一个脚本，以使用Webpack构建你的Electron应用程序。在scripts部分添加以下代码："scripts": { "start": "electron .", "build": "webpack" } - 现在，你可以使用以下命令来启动Electron应用程序并加载本地文件：npm start
以上步骤涵盖了使用Electron和Webpack加载本地文件的基本过程。请注意，这只是一个简单的示例，你可以根据自己的需求进行更复杂的配置和功能扩展。
相关·内容
2回答
我正在用电子、反应(jsx)和Babel一起编写一个应用程序。我今天晚上转到了TypeScript，我想不出如何让一切正常运转。建立的Npm包要么是反应型的，要么是TypeScript型的，但不是两者兼而有之，也不是电子型的。(我也要执行webpack。)
我的问题是:使一切正常工作的文件夹、文件和数据包的最小结构是什么？我只想使用用TypeScript编写的React组件在主窗口上显示hello世界。目前，我的包是电子</e
浏览 0提问于2017-11-15得票数 3
回答已采纳
我正在开发一个电子视频播放器。我希望能够从文件系统中选择一个视频文件并播放它。win的路径可能看起来像C://Users/.../...。和用于OSX的/Users/../../。所以问题是Chrome不能使用file://协议，如果没有协议，它就会试图从当前主机加载它。那么，有没有办法从OS文件系统中使用electr
浏览 14提问于2017-06-27得票数 2
1回答
我有一个带有预加载脚本的电子网络视图。所需的webview应该如下所示：由于我正在使用Webpack构建我的项目，inject.js必须得到Webpack的认可，因此包括使用: requre('./inject.js')
但是，由于电子But
浏览 13提问于2017-06-03得票数 1
1回答
我正在尝试构建一个Vue应用程序，并且我是Vue新手，我正在尝试使用以下代码在Js/Ts中加载运行时镜像 console.log("code is being called");console.log("image loaded");image.src = "static/prison_tileset.png"; 代码在常规的html文件上工作得很好正在调用
浏览 204提问于2019-10-07得票数 0
1回答
我一直在尝试将react与电子结合使用。我已经设置了react，我正在构建react站点，该站点输出build/ dir目录中的站点。当我尝试加载构建的index.html时，站点不想工作。这是因为构建的react站点并不是要在本地加载，而是要提供服务。 我的问题是:我如何在电子中加载我的react站点？既用于生产构建，也用于本地开发。我不需要任何老生常谈的鸭子磁带解决方案来获得热重新加载，我只是想要<em
浏览 13提问于2020-06-20得票数 0
回答已采纳
电子1.6.5，Webpack 2.4.1const { ipcRenderer } = require('electron'); {...props}问题是我的webp
浏览 2提问于2017-05-05得票数 16
我遵循创建电子/反应应用程序，我的代码与教程中的代码基本相同，但是我发现我无法使用"fs.writeFile“在本地加载或保存文件。我目前正在使用这个语句来实现和调用fs：我对电子和反应都很陌生，所以我不知道如何解决这个问题我在过去创建了<em
浏览 4提问于2020-05-20得票数 0
我一直在使用html-webpack-plugin从我的源代码加载一个index.html文件，但是我的客户端附带了一些本地化，我认为如果能够动态地添加它们，那就太好了。因此，我试图切换到使用html-webpack-plugin的模板引擎，即ejs，但我遇到了重大问题！我想要html-webpack-plugin呈现和.ejs文件，我需要给这个.ejs文件一个巨
浏览 0提问于2016-10-04得票数 6
回答已采纳
在我将html文件与webpack (dist文件夹)捆绑后，电子渲染器不会加载html文件，包括脚本。图片：我确信我加载了正确的文件，因为如果我删除html-webpack-plugin放在编译的'index.html‘中的脚本标记，它就会被加载。对于我使用webpack-dev服务器的每一个设置(包括相同的bash实例和不同的实例)
浏览 0提问于2019-05-06得票数 0
回答已采纳
我使用Webpack5创建具有HMR模式的dev服务器。import path from 'path'im
浏览 21提问于2022-01-16得票数 0
我正在尝试使用Angular 2(配置了最新的基于webpack的angular cli)为gui构建一个电子应用程序的原型，但由于我不知道如何在angular2组件中导入电子应用程序接口，我被卡住了。具体地说，我希望能够在点击ui中的按钮时打开一个新的BrowserWindow…所以： open如何</e
浏览 6提问于2016-10-25得票数 3
我正在使用Angular 4创建一个电子应用程序。我如何设置它，以便它监视任何更改并实时重新加载它。protractor": "~5.1.2", "tslint": "~5.3.2", }电子目前，我每次都使用<
浏览 0提问于2017-10-03得票数 7
1回答
我在我的app.js上加载图标 import bg from './icons/bg.png';import rg from './icons/rs.png'; 当我运行默认的react启动脚本时，它们工作得很好，但是当我尝试使用这个webpack进行编译时： const path = require('path');
module.
浏览 54提问于2021-02-28得票数 -1
回答已采纳
我有一个macOS电子应用程序，是基于这个电子锻造Webpack +类型转录，集成与反应，作为文件的。再远一点问题是：
在我的代码中，我使用NodeJS 模块在后台运行子进程。这个子进程是一个已安装的依赖节点模块(顺便说一下，它是 npm包，但是这个问题可以应用于二进制文件调用的任何包，而不是js文件)。此外，webpack</em
浏览 29提问于2022-11-22得票数 2
回答已采纳
在我的Angular2+TypeScript+WebPack项目中，我想从以下url使用/导入Esri ArcGIS JavaScript API：
var webpack
浏览 1提问于2016-10-06得票数 0
我有一个反应电子应用程序与Webpack，并试图将其构建成一个可执行文件。 (节点:8172)电子:未能加载URL：和错误: ERR_CONNECTION_REFUSED (使用mixmatch --trace-wa
浏览 2提问于2022-01-30得票数 0
4回答
我在用电子做实验。我看到了很多使用webpack的例子。
但是为什么要用webpack这样的东西呢？因为据我所知，电子支持require('module')。
浏览 7提问于2016-04-14得票数 24
回答已采纳
3回答
我正在用Webpack 2和电子在Mac上建立nodejs应用程序。在根目录下的项目中，我有一个目录“data”，其中我将配置存储在json中，比如data/ configuration /files.json(在实践中，有不同的文件具有动态名称)Webpack配置正在使用json-loader，而我没有发现任何关于包含特定文件
浏览 5提问于2017-06-02得票数 11
回答已采纳
1回答
我有一个使用node.js的电子应用程序。我想用温斯顿登录这个应用程序。我已经将温斯顿添加到了我的package.json文件中，但是当我为webpack运行构建命令时，我收到了温斯顿的colors.js依赖项的一些警告。然后它引用了温斯顿和colors.js。忽略警告是行不通的，因为电子应用程序在试图从温斯顿加载一些文件时得到了一个异常。我对SO和github网站做了一些调查，他们说colors.
浏览 1提问于2016-06-15得票数 10
回答已采纳
我是新来的webpack。想知道我们如何像使用cssify插件一样，使用webpack将较少的文件转换为css吗？
浏览 0提问于2016-02-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
