Question

目前我正在我们的网站上实施webpack。这些网站是基于php Zend2架构的静态网站。我们有很多和丢失的作曲家安装和更新的供应商模块。我有一个有效的webpack解决方案，因此我觉得遗留缩小的代码可能会更好。我有以下约束

按原样实现旧的js代码。我知道重写模块将是最好的选择，但我们有100多个js文件。如果需要触及代码，计划是重写。
应根据env.NODE_ENV标志缩小旧版代码
需要维护当前的代码拆分

目前解决方案的工作原理如下

Webpack切换到不同的js-entry文件

module.exports = env =＆gt; {

// webpack variables
const isProduction = env.NODE_ENV === 'production';
const assetJsPath = 'module/Eurocampings/assets/js/';
const assetJsLegacyPath = 'module/Eurocampings/assets/js-legacy/';
const webpackEntrySuffix = isProduction ? 'production' : 'develop';
const paths = {
    entry: {
        main: `${assetJsPath}main.js`,
        mainLegacy: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/main-legacy.js`,
        vendorBase: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/vendor-base.js`,
        homepage: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/homepage.js`,
        campsiteDetails: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/campsite-details.js`,
        campsiteCompare: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/campsite-compare.js`,
        campsiteChainDetails: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/campsite-chain-details.js`,
        ajaxsolr: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/ajaxsolr.js`,
        campsiteSearch: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/campsite-search.js`,
        campsiteExtendedSearch: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/campsite-extended-search.js`,
        picturefill: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/picturefill.js`,
        destination: `${assetJsLegacyPath}webpack-entries-${webpackEntrySuffix}/destination.js`,
        styles: './module/Eurocampings/assets/scss/style.scss',
    },
    output: {
        folder: 'module/Eurocampings/dist',
    }
};

没有uglify-loader开发遗留条目的示例！

 // webpack entry for develop
import exec from 'script-loader!../AcsiCampsiteSearch/DataLayerWidgetFactory.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/acsiCampsiteCompare.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Label.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Selector.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/CompareBox.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Cookie.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite-search/assets/js/search.js';
import exec from 'script-loader!../../../../../vendor/acsi/acsi-campsite-search/assets/js/map_initialization.js';

使用uglify-loader生成条目的示例！

// webpack entry for develop
import exec from 'script-loader!uglify-loader!../AcsiCampsiteSearch/DataLayerWidgetFactory.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/acsiCampsiteCompare.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Label.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Selector.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/CompareBox.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite/assets/js/acsiCampsiteCompare/extensions/Cookie.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite-search/assets/js/search.js';
import exec from 'script-loader!uglify-loader!../../../../../vendor/acsi/acsi-campsite-search/assets/js/map_initialization.js';

Webpack以干净的方式简化了许多遗留代码

0 个答案: