执行npm init electron-app命令未生成webpack文件夹问题

1. 版本差异导致结构变化 #

现在npm init electron-app@latest使用的是最新版Electron Forge，其webpack模板的结构已经更新——不再生成单独的webpack文件夹，相关配置整合到了项目根目录的forge.config.js文件中。你可以打开这个文件，查看plugins字段下的WebpackPlugin配置，里面包含了主进程和渲染进程的webpack相关设置。

2. 回退到教程对应版本（匹配教程结构） #

如果需要和教程里的结构完全一致，可以指定旧版本的模板初始化项目。比如教程使用的可能是Electron Forge 6.x版本，执行以下命令：

npm init electron-app@6.0.0 testApp -- --template=webpack

如果之前装过全局的Electron Forge，先卸载避免冲突：

npm uninstall -g @electron-forge/cli

3. 手动配置webpack文件夹（自定义结构） #

如果坚持要生成独立的webpack文件夹，按以下步骤操作：

• 在项目根目录创建webpack文件夹，里面分别新建main.webpack.js和renderer.webpack.js，配置对应进程的入口和输出：

  // webpack/main.webpack.js
  module.exports = {
    entry: './src/main.js',
    target: 'electron-main',
    output: {
      filename: 'main.js',
      path: __dirname + '/../.webpack/main'
    }
  };
  

  // webpack/renderer.webpack.js
  module.exports = {
    entry: './src/renderer.js',
    target: 'electron-renderer',
    output: {
      filename: 'renderer.js',
      path: __dirname + '/../.webpack/renderer'
    }
  };
  

• 安装依赖：

  npm install --save-dev webpack webpack-cli @electron-forge/plugin-webpack
  

• 修改forge.config.js，指定自定义的webpack配置路径：

  module.exports = {
    plugins: [
      {
        name: '@electron-forge/plugin-webpack',
        config: {
          mainConfig: './webpack/main.webpack.js',
          renderer: {
            config: './webpack/renderer.webpack.js',
            entryPoints: [{ html: './src/index.html', js: './src/renderer.js', name: 'main_window' }]
          }
        }
      }
    ]
  };
  

4. 验证项目可用性 #

不管有没有webpack文件夹，先执行npm start启动项目。如果能正常打开Electron窗口，说明webpack配置已经生效，只是结构和教程不同而已。

内容的提问来源于stack exchange，提问作者Joey