通過npm/webpack加載預構建模塊的調試版本

Question

在npm中有一個JavaScript庫，預構建並可用，我希望使用/ debug進行開發。在我的情況下，它是openlayers。

在需要的JavaScript文件，並想調試的經典方式，一個只想從生產版本切換腳本URL到調試版本，即：

到

但是，在使用webpack然後通過npm導入時：

import openlayers from 'openlayers' 

讓您獲得第e庫，與上面的ol.js腳本相同。

在一個側面說明，要停止的WebPack試圖解析預建圖書館，並拋出一個警告有關您必須包括這樣的事情：

// Squash OL whinging 
webpackConfig.module.noParse = [ 
    /\/dist\/ol.*\.js/, // openlayers is pre-built 
] 

回到手頭的問題：我怎麼能有條件負荷一個預構建模塊的不同入口點，並像這樣導入？

當然，我可以用哈克的方式做到這一點。通過進入node_modules /的OpenLayers /的package.json和

"browser": "dist/ol.js", 

切換瀏覽器領域

"browser": "dist/ol-debug.js", 

有沒有一種辦法可以要求通過的WebPack或通過使用不同的不同的入口點導入語法？根據規範，我是否首先必須請求圖書館維護人員更新瀏覽器字段，以便爲瀏覽器提供不同的入口點提示？ https://github.com/defunctzombie/package-browser-field-spec

有關更有效地實現此目的的思考？我們希望能夠以編程方式根據env變量切換加載庫的生產和調試版本。

Answer 1

的WebPack具有用於替換模塊插入不同的路徑配置選項：https://webpack.github.io/docs/configuration.html#resolve-alias

這解決了openlayers進口使用調試版本：

webpackConfig.resolve.alias: { 
    openlayers: 'openlayers/dist/ol-debug.js' 
} 

在我的構建系統我有一個函數，環境類型並返回匹配的webpackConfig。根據參數我包含上面的代碼片斷或不。 Full code：webpack-multi-config.js

我有兩個不同的（gulp-）任務用於開發和生產。例如，生產任務：webpackProduction.js
Line 1將類型爲production的配置腳本導入。

我的構建系統基於gulp starter。