【发布时间】：2022-07-04 15:21:56
【问题描述】：
我以自定义方式开发项目（为了更方便），我需要创建开发环境。 我使用 Webpack5 创建具有 HMR 模式的开发服务器。
当我启动我的脚本（配置并运行 webpack 开发服务器）时，我没有抛出任何错误，但也没有附加任何内容。
谁能帮我理解并为 Electron 应用创建 Webpack 开发服务器？
我的 webpack.config.js
import path from 'path'
import webpack from 'webpack'
import {VueLoaderPlugin} from 'vue-loader'
import HTMLWebpackPlugin from 'html-webpack-plugin'
import url from "url"
import nodeExternals from 'webpack-node-externals'
const __filename = url.fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const buildDir = path.join(__dirname, '..', 'build')
const mainEntryFile = path.join(__dirname, '..', 'src', 'main', 'main.js')
const indexHTMLFile = path.join(__dirname, '..', 'src', 'renderer', 'index.html')
const rendererEntryFile = path.join(__dirname, '..', 'src', 'renderer', 'renderer.js')
const componentDir = path.join(__dirname, '..', 'src', 'renderer/components')
const nodeModulesDir = path.join(__dirname, '..', 'node_modules')
const srcDir = path.join(__dirname, '..', 'src')
console.log('======= ComponentsDir : ' + componentDir)
console.log('======= BuildDir : ' + buildDir)
console.log('======= srcdDir : ' + srcDir)
console.log('======= mainEntryFile : ' + mainEntryFile)
let webpackConfig =
{
entry: {
main: mainEntryFile,
app: rendererEntryFile
},
output: {
path: buildDir,
filename: 'main-[name].js'
},
mode: "development",
devtool: 'eval',
target: 'electron-renderer',
// externals: [nodeExternals()],
// stats: 'errors-only',
node: {
__dirname: false,
__filename: false
},
resolve: {
alias: {
// this isn't technically needed, since the default `vue` entry for bundlers
// is a simple `export * from '@vue/runtime-dom`. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
vue: "@vue/runtime-dom",
// env: path.resolve(__dirname, `./env_${envName(env)}.json`)
"@": srcDir,
'@vueComponents': 'src/renderer/components'
},
extensions: ['.ts', '.js', '.json'],
},
// resolveLoader: {
// modules: [
// nodeModulesDir
// ]
// },
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /.vue$/,
loader: 'vue-loader',
options: {
esModule: true
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new HTMLWebpackPlugin({
showErrors: true,
cache: true,
template: indexHTMLFile
})
]
}
export default webpackConfig
我的 dev-server-webpack.js（用于启动 webpack）：
import webpack from 'webpack'
import WebpackDevServer from 'webpack-dev-server'
import webpackConfig from '../config/webpack.config.js'
import path from 'path'
import url from 'url'
console.log('---------------------------------------------')
console.log('Starting the webpack dev web server script...')
console.log('---------------------------------------------')
const __filename = url.fileURLToPath(import.meta.url);
console.log('Filename : ' + __filename)
console.log('Directory name : ' + path.dirname(__filename))
const server = new WebpackDevServer(webpack(webpackConfig), {})
server.start()
我的输出脚本登录到控制台是：
λ npm run webpack:dev
> electron-vue-template@0.1.0 webpack:dev
> set NODE_ENV=development && node scripts/dev-server-webpack.js
runtime modules 54.1 KiB 24 modules
orphan modules 228 bytes [orphan] 8 modules
cacheable modules 736 KiB
modules by path ./node_modules/ 724 KiB 35 modules
modules by path ./src/ 11.9 KiB
modules by path ./src/renderer/ 8.72 KiB
modules by path ./src/renderer/components/*.vue 6.4 KiB 8 modules
modules by path ./src/renderer/*.vue 2.11 KiB 5 modules
./src/renderer/renderer.js 212 bytes [built] [code generated]
./src/main/main.js 1.9 KiB [built] [code generated]
./src/service/router.ts 1.24 KiB [built] [code generated]
external "events" 42 bytes [built] [code generated]
external "electron" 42 bytes [built] [code generated]
webpack 5.66.0 compiled successfully in 4433 ms
编译 webpack 成功，但没有启动任何 chromium...
授权启动Chromium navigator（Electron）和主进程electron的机制是什么？
我不想使用 electron-webpack，因为它会规范化（因此强制结构和其他人认为不是所有项目都对应）配置、结构、选项或文件。
【问题讨论】：
-
你没有在任何地方启动电子，你只是在启动开发服务器
-
你是否考虑将“spawn”命令放入 webpack 中？