javascript - 使用 Webpack 进行仅调试页面

Question

我目前是 React Web 应用程序的独立开发人员，但在一月份，一些新手将加入我的行列。因此，我想为应用程序创建实时文档，我可以在其中嵌入组件并讨论它们的使用方式和用途。

有什么方法可以让 webpack 在 NODE_ENV 未设置为 时仅编译这些文档页面，而不是将所有 JavaScript 和 CSS 文件导出到单独的项目中“生产”？

我当前的 Webpack 配置如下所示:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: [
          'react',
          'es2015',
          'stage-0'
        ],
        plugins: [
          'react-html-attrs',
          'transform-decorators-legacy',
          'transform-class-properties',
          'babel-polyfill'
        ],
      }
    },
    { 
      test: /\.less$/,
      loader: "style!css!autoprefixer!less"
    }
  ]
},
output: {
  path: __dirname + "/dist/",
  filename: "app.min.js"
}

我只能假设我需要在 loaders 部分中放置某种条件检查，但这是我第一次使用 Webpack，我不确定我到底要做什么需要改变。

Answer 1

我强烈建议您安装并使用storybook

它为您创建了一个与您的服务器完全不同的服务器。您可以在其中以非常简单的方式测试、查看和记录所有组件。

检查Start Guide

希望这是您正在寻找的