Webpack 1.14未转ES5？Word加载项引入broken-loop遇阻

I totally get how frustrating limited debugging can be when building a Word add-in—especially when trying to replace Web Workers with a library like broken-loop. Let’s walk through some targeted fixes for the issues you’re facing with your webpack setup and implementation:

• Fix your webpack include path
  The absolute path /node_modules/broken-loop/dist might not resolve correctly across different environments. Instead, use webpack’s path.resolve to create a reliable relative path that works regardless of your project’s directory structure:

  const path = require('path');
  // ...
  { 
    test: /\.(js|jsx|ts)$/, 
    include: [paths.appSrc, path.resolve(__dirname, 'node_modules/broken-loop/dist')], 
    loader: 'babel', 
    query: { presets: ['es2015', 'stage-0'] } 
  },
  

• Update Babel presets for Office compatibility
  The es2015 preset is outdated, and Office’s embedded WebView (especially older versions) has strict ES support requirements. Switch to @babel/preset-env with targeted browser settings to ensure your code plays nice with Word’s runtime:

  query: {
    presets: [
      ['@babel/preset-env', {
        targets: {
          browsers: ['last 2 Edge versions', 'ie 11'] // Matches Office's WebView environment
        }
      }],
      '@babel/preset-react' // Don't forget this if you're using React components!
    ]
  }
  

• Verify broken-loop module import
  Make sure you’re importing the library correctly in your code, rather than referencing dist files directly. This ensures webpack processes the module through your configured Babel loader:

  import { createLoop } from 'broken-loop';
  

• Check Office add-in security restrictions
  Word add-ins operate under strict Content Security Policies (CSP) and sandbox limitations. Double-check if broken-loop uses any APIs that might be blocked—like certain DOM manipulations or timer behaviors. You can scan the library’s source code to confirm its core logic is compatible with Office’s restricted environment.

• Leverage limited debugging tools
  Even with restricted debugging, you can add console.log statements to key parts of your code, then connect Edge DevTools to Word’s WebView (via the Office Add-ins Debugger) to inspect logs. This can help you narrow down whether the issue happens during compilation or runtime.

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