使用Webpack進行調試的頁面

我目前是React Web應用程序的獨立開發人員，但在一月份，一些新手會加入我。因此，我想爲應用程序創建實時文檔，以便在其中嵌入組件並討論如何使用它們以及如何使用它們。使用Webpack進行調試的頁面

與其將所有JavaScript和CSS文件導出到單獨的項目中，有沒有什麼辦法可以讓我的webpack只在編譯這些文檔頁時NODE_ENV未設置爲"production"？

我目前的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和我我不確定我需要改變什麼。

來源

2016-12-16 James Donnelly

在我加入我的文檔文件夾到排除的路徑去年底，只有當NODE_ENV不等於「生產」：

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

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

它並不完美，但它很好地處理我的處境。

來源

2016-12-19 13:22:43