GrapesJs CLI配置Webpack5多入口JS+SCSS遇vars.js生成异常

问题背景 #

正在配置多JS入口的Webpack插件，每个JS文件包含业务函数并导入SCSS样式（已通过Webpack loader处理）。目前多数输出文件正常，但vars.js生成内容不正确，且未生成对应的vars.js.map。尝试多种导出方式无效，推测问题出在entry或output配置环节。

当前使用Grapes Cli提供的Webpack默认配置，修改后的核心配置要点如下：

module.exports = {
  entry: {
    main: './src/main.js',
    vars: './src/vars.js',
    // 其他入口文件...
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  // SCSS loader及其他插件配置...
};

排查与解决方案 #

• 确认vars.js的导出逻辑
  确保文件内有明确的JS导出，避免仅导入SCSS而无有效导出（Webpack会优化空模块）：

  // 示例：ES模块导出
  import './vars.scss';
  export const themeVariables = {
    primaryColor: '#2196F3',
    fontSizeBase: '16px'
  };
  
  // 或CommonJS风格导出（兼容旧配置）
  // module.exports = { themeVariables: ... };
  

• 校验entry配置准确性
  检查vars入口的文件路径是否拼写正确，文件是否存在于指定目录；若使用动态入口（如glob匹配），确认vars.js被正确纳入入口列表。

• 检查sourcemap与output配置

  • 确保devtool设置为source-map/inline-source-map等能生成sourcemap的选项，且生产模式下未被配置覆盖（部分脚手架会在生产环境默认关闭sourcemap）。
  • 验证output的path目录有写入权限，filename规则未对vars.js做特殊重命名处理。

• 排除样式插件干扰
  若使用MiniCssExtractPlugin提取SCSS，检查是否因样式被单独提取后，vars.js的JS模块被清空。可暂时禁用该插件，测试vars.js是否能正常生成；若恢复正常，可在vars.js中添加占位导出避免被优化。

• 查看Webpack构建日志
  执行build任务时，查看终端输出的日志信息，确认vars.js是否被正确纳入构建流程，是否有模块优化或错误提示。

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