如何在Angular 5+Ionic 3+Webpack 3项目中安装运行Storybook？

先给你梳理几个可行的方向，毕竟旧项目的依赖兼容确实是个头疼的问题：

1. 锁定Storybook到兼容Webpack3的旧版本 #

这是最稳妥的方案，因为新版Storybook（6+）完全依赖Webpack4+，和你的Webpack3环境天然冲突。你可以选择Storybook 5.x系列，这是最后支持Webpack3的版本，同时也对Angular5有较好的兼容。

• 安装指定版本的Storybook Angular包：

  npm install @storybook/angular@5.3.21 --save-dev
  

  （5.3.21是5.x系列的最后稳定版，适配Webpack3和Angular5）
• 如果安装时出现peer依赖冲突，用npm install --legacy-peer-deps（npm 7+）或者npm install --force来跳过严格校验，之后手动调整不兼容的依赖版本（比如core-js、babel-loader这些，尽量降到适配Angular5的版本）。
• 安装完成后，按照官方5.x的文档配置.storybook/config.js和.storybook/addons.js，基本能正常启动。

2. 尝试隔离Storybook的Webpack环境（并行双Webpack版本） #

这个思路是可行的，因为Storybook的Webpack配置是独立于项目的，你可以让它单独使用Webpack4，不影响项目的Webpack3。具体操作：

• 先安装最新版Storybook，同时把Webpack4和webpack-cli安装到项目的devDependencies：

  npm install @storybook/angular webpack@4.46.0 webpack-cli@3.3.12 --save-dev
  

• 在.storybook/webpack.config.js里强制让Storybook使用本地安装的Webpack4：

  const path = require('path');
  module.exports = async ({ config }) => {
    // 替换默认的Webpack引用为本地的Webpack4
    config.resolve.alias['webpack'] = path.resolve(__dirname, '../node_modules/webpack');
    
    // 额外配置：适配Angular5的编译需求
    // 比如添加Angular5的loader、调整babel配置等
    config.module.rules.push({
      test: /\.ts$/,
      use: [{
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          configFile: path.resolve(__dirname, '../tsconfig.json')
        }
      }]
    });
    
    return config;
  };
  

• 注意：这种方式可能需要你手动调整很多Storybook的默认配置，比如适配Angular5的模板编译、样式处理等，成本较高，但能用上新版Storybook的功能。

3. 修复启动时的Tapable错误 #

你提到的启动错误（Tapable.plugin is deprecated和TypeError: compilation.templatesPlugin is not a function），是因为新版Storybook的某些内置插件还在使用Webpack3的旧Tapable API，而你的项目环境里的Webpack3和这些插件不兼容。

• 核心问题是html-webpack-plugin的版本冲突：Storybook新版可能自带了适配Webpack4的插件，但你的项目依赖Webpack3，导致调用旧API失败。你可以手动替换这个插件：
  在.storybook/webpack.config.js里覆盖默认的HtmlWebpackPlugin：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  module.exports = async ({ config }) => {
    // 替换所有旧版HtmlWebpackPlugin实例
    config.plugins = config.plugins.map(plugin => {
      if (plugin.constructor.name === 'HtmlWebpackPlugin') {
        return new HtmlWebpackPlugin({
          ...plugin.options,
          template: path.resolve(__dirname, '../src/index.html') // 用你项目的模板文件
        });
      }
      return plugin;
    });
    return config;
  };
  

• 如果还有其他插件报错，用类似的方式找到对应的插件，升级或替换为兼容Webpack3的版本。

总结 #

优先推荐方案1，因为配置成本最低，能快速让Storybook跑起来。如果一定要用新版Storybook的功能，再尝试方案2或3，不过需要投入更多精力调试依赖和配置。

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