Question

我目前是React网络应用程序的独立开发者，但在1月份，有几个新手将加入我。因此，我想为应用程序创建实时文档，我可以在其中嵌入组件并讨论它们的使用方式以及它们的用途。

除了将我的所有JavaScript和CSS文件导出到一个单独的项目中之外，有什么办法可以让webpack只在NODE_ENV未设置为{{1}时编译这些文档页面}？

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

"production"

我只能假设我需要在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" }部分进行某种条件检查，但这是我第一次使用Webpack而我不确定我是什么＆＃ 39; d需要改变。

Answer 1

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

它会为您创建一个完全取决于您的服务器。您可以以非常简单的方式测试，查看和记录所有组件。

检查Start Guide

我希望它能满足您的需求

Answer 2

最后，我将文档文件夹添加到排除的路径中，只有当NODE_ENV不等于＆＃34;生产＆＃34;：

var debug = process.env.NODE_ENV !== "production";

module: {
  loaders: [
    {
      ...
      exclude: new RegExp(
        'node_modeules|bower_components' +
        (!debug ? path.resolve(__dirname, 'documentation') : "")
      )
    }
  ]
}

它并不完美，但它可以很好地处理我的情况。

使用Webpack的仅调试页面

2 个答案: