iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 29
1
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 29

<29 - 番外篇 03> webpack 與 gulp 聯手 - Stats 調校輸出訊息

今天是番外篇的最後一篇文章,其實到目前為止,也已經做到如何使用 gulp 來執行 webpack 了,只是還有一個小小的問題,我想做改良,也就是輸出的訊息。

gulpfile.js 檔案中,webpackwebpack-dev-server 任務如下:

…

gulp.task("webpack", function(callback) {
  // run webpack
  webpack(webpackConfig, function(err, stats) {
    if(err) throw new gutil.PluginError("webpack", err);
    gutil.log("[webpack]", stats.toString({
      // output options
    }));
    callback();
  });
});

gulp.task("webpack-dev-server", function(callback) {
	var myConfig = Object.create(webpackConfig);

	// Start a webpack-dev-server
	new WebpackDevServer(webpack(myConfig), {
		publicPath: "/" + myConfig.output.publicPath,
		stats: {
			colors: true
		}
	}).listen(8080, "localhost", function(err) {
		if(err) throw new gutil.PluginError("webpack-dev-server", err);
		gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
	});
});

若這時我執行 gulp webpackgulp webpack-dev-server 指令時,會輸出非常大量的訊息,如下(請快速掃瞄過去即可):

[23:51:13] Using gulpfile ~/Documents/Carlos/company/projects/webpack_proj/gulpfile.js
[23:51:13] Starting 'webpack'...
clean-webpack-plugin: /Users/carlos/Documents/Carlos/company/projects/webpack_proj/dist has been removed.
clean-webpack-plugin: 1 file(s) excluded - 05ef02be5a02714eab77.vendor.js
The webpack build process is starting!!!
[23:51:17] [webpack] Hash: 54b12fec6e3ac3028a34
Version: webpack 2.1.0-beta.27
Time: 3779ms
                                       Asset       Size  Chunks             Chunk Names
               517819e2edacb58f7406.react.js  546 bytes    6, 8  [emitted]  react
   test-37805d3e78d3d5edc40d43d62dc9ebf2.png    3.02 kB          [emitted]
                   692eed1e7d90472d10f5.0.js  256 bytes    0, 8  [emitted]
        d10f7007a2e891182a9b.vendor_react.js     724 kB    1, 8  [emitted]  vendor_react
              fb3af3d2272c98127cd3.vendor.js     982 kB    2, 8  [emitted]  vendor
                 ce5ee126441b838d0255.app.js    13.5 kB    3, 8  [emitted]  app
18755eaa92f20126c13d.component_collection.js    5.24 kB    4, 8  [emitted]  component_collection
       b9bf4686146ad520f985.test_external.js  502 bytes    5, 8  [emitted]  test_external
webpack-532a8eda5bf69bf78857fad01d675c44.svg    2.39 kB          [emitted]
             13ccb3122f204e277e1b.another.js  297 bytes    7, 8  [emitted]  another
            1bc95dd7dad91c667477.manifest.js    5.59 kB       8  [emitted]  manifest
                          assets/css/app.css   58 bytes    3, 8  [emitted]  app
         assets/css/component_collection.css   99 bytes    4, 8  [emitted]  component_collection
                        custom-manifest.json  734 bytes          [emitted]
                 assets/static/css/file2.css   26 bytes          [emitted]
                 assets/static/css/file1.css   24 bytes          [emitted]
chunk    {0} 692eed1e7d90472d10f5.0.js 88 bytes {7} [rendered]
  [202] ./app/a1.js 44 bytes {0} [built]
  [203] ./app/a2.js 44 bytes {0} [built]
chunk    {1} d10f7007a2e891182a9b.vendor_react.js (vendor_react) 702 kB {8} [initial] [rendered]
    [1] ./~/process/browser.js 5.3 kB {1} [built]
    [2] ./~/fbjs/lib/invariant.js 1.63 kB {1} [built]
    [3] ./~/fbjs/lib/warning.js 2.1 kB {1} [built]
    [4] ./~/react-dom/lib/reactProdInvariant.js 1.24 kB {1} [built]
    [5] ./~/object-assign/index.js 1.99 kB {1} [built]
    [6] ./~/react-dom/lib/ReactDOMComponentTree.js 6.16 kB {1} [built]
    [7] ./~/fbjs/lib/ExecutionEnvironment.js 1.06 kB {1} [built]
    [8] ./~/react/lib/ReactComponentTreeHook.js 10.4 kB {1} [built]
    [9] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {1} [built]
   [10] ./~/fbjs/lib/emptyFunction.js 1.08 kB {1} [built]
   [11] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {1} [built]
   [12] ./~/react/lib/ReactCurrentOwner.js 623 bytes {1} [built]
   [13] ./~/react-dom/lib/SyntheticEvent.js 9.18 kB {1} [built]
   [14] ./~/react-dom/lib/DOMProperty.js 8.24 kB {1} [built]
   [15] ./~/react-dom/lib/PooledClass.js 3.68 kB {1} [built]
   [16] ./~/react/lib/ReactElement.js 11.2 kB {1} [built]
   [17] ./~/react/lib/reactProdInvariant.js 1.24 kB {1} [built]
   [18] ./~/react-dom/lib/DOMLazyTree.js 3.71 kB {1} [built]
   [19] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {1} [built]
   [20] ./~/react/lib/React.js 2.69 kB {1} [built]
   [21] ./~/react-dom/index.js 59 bytes {1} [built]
   [22] ./~/react/react.js 56 bytes {1} [built]
   [23] ./~/fbjs/lib/emptyObject.js 458 bytes {1} [built]
   [24] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {1} [built]
   [25] ./~/react-dom/lib/EventPropagators.js 5.09 kB {1} [built]
   [26] ./~/react-dom/lib/ReactInstanceMap.js 1.22 kB {1} [built]
   [27] ./~/react-dom/lib/SyntheticUIEvent.js 1.57 kB {1} [built]
   [28] ./~/react-dom/lib/EventPluginRegistry.js 9.75 kB {1} [built]
   [29] ./~/react-dom/lib/ReactBrowserEventEmitter.js 12.6 kB {1} [built]
   [30] ./~/react-dom/lib/SyntheticMouseEvent.js 2.14 kB {1} [built]
   [31] ./~/react-dom/lib/Transaction.js 9.45 kB {1} [built]
   [32] ./~/react-dom/lib/escapeTextContentForBrowser.js 3.43 kB {1} [built]
   [33] ./~/react-dom/lib/setInnerHTML.js 3.86 kB {1} [built]
   [35] ./~/fbjs/lib/shallowEqual.js 1.74 kB {1} [built]
   [36] ./~/react-dom/lib/DOMChildrenOperations.js 7.67 kB {1} [built]
   [37] ./~/react-dom/lib/DOMNamespaces.js 505 bytes {1} [built]
   [38] ./~/react-dom/lib/EventPluginUtils.js 7.95 kB {1} [built]
   [39] ./~/react-dom/lib/KeyEscapeUtils.js 1.29 kB {1} [built]
   [40] ./~/react-dom/lib/LinkedValueUtils.js 5.15 kB {1} [built]
   [41] ./~/react-dom/lib/ReactComponentEnvironment.js 1.3 kB {1} [built]
   [42] ./~/react-dom/lib/ReactErrorUtils.js 2.25 kB {1} [built]
   [43] ./~/react-dom/lib/ReactUpdateQueue.js 9.01 kB {1} [built]
   [44] ./~/react-dom/lib/createMicrosoftUnsafeLocalFunction.js 810 bytes {1} [built]
   [45] ./~/react-dom/lib/getEventCharCode.js 1.5 kB {1} [built]
   [46] ./~/react-dom/lib/getEventModifierState.js 1.23 kB {1} [built]
   [47] ./~/react-dom/lib/getEventTarget.js 1.01 kB {1} [built]
   [48] ./~/react-dom/lib/isEventSupported.js 1.94 kB {1} [built]
   [49] ./~/react-dom/lib/shouldUpdateReactComponent.js 1.4 kB {1} [built]
   [50] ./~/react-dom/lib/validateDOMNesting.js 13.7 kB {1} [built]
   [51] ./~/react/lib/ReactComponent.js 4.61 kB {1} [built]
   [52] ./~/react/lib/ReactNoopUpdateQueue.js 3.36 kB {1} [built]
   [53] ./~/react/lib/ReactPropTypeLocationNames.js 572 bytes {1} [built]
   [54] ./~/react/lib/canDefineProperty.js 661 bytes {1} [built]
   [55] ./~/react/lib/getIteratorFn.js 1.12 kB {1} [built]
   [57] ./~/fbjs/lib/EventListener.js 2.67 kB {1} [built]
   [58] ./~/fbjs/lib/focusNode.js 704 bytes {1} [built]
   [59] ./~/fbjs/lib/getActiveElement.js 895 bytes {1} [built]
  [168] ./~/react-dom/lib/CSSProperty.js 3.66 kB {1} [built]
  [169] ./~/react-dom/lib/CallbackQueue.js 3.16 kB {1} [built]
  [170] ./~/react-dom/lib/DOMPropertyOperations.js 7.61 kB {1} [built]
  [171] ./~/react-dom/lib/ReactDOMComponentFlags.js 429 bytes {1} [built]
  [172] ./~/react-dom/lib/ReactDOMSelect.js 6.81 kB {1} [built]
  [173] ./~/react-dom/lib/ReactEmptyComponent.js 704 bytes {1} [built]
  [174] ./~/react-dom/lib/ReactFeatureFlags.js 628 bytes {1} [built]
  [175] ./~/react-dom/lib/ReactHostComponent.js 2.38 kB {1} [built]
  [176] ./~/react-dom/lib/ReactInputSelection.js 4.27 kB {1} [built]
  [177] ./~/react-dom/lib/ReactMount.js 25.5 kB {1} [built]
  [178] ./~/react-dom/lib/ReactNodeTypes.js 1.02 kB {1} [built]
  [179] ./~/react-dom/lib/ReactPropTypesSecret.js 442 bytes {1} [built]
  [180] ./~/react-dom/lib/ViewportMetrics.js 606 bytes {1} [built]
  [181] ./~/react-dom/lib/accumulateInto.js 1.69 kB {1} [built]
  [182] ./~/react-dom/lib/forEachAccumulated.js 855 bytes {1} [built]
  [183] ./~/react-dom/lib/getHostComponentFromComposite.js 740 bytes {1} [built]
  [184] ./~/react-dom/lib/getTextContentAccessor.js 955 bytes {1} [built]
  [185] ./~/react-dom/lib/instantiateReactComponent.js 4.79 kB {1} [built]
  [186] ./~/react-dom/lib/isTextInputElement.js 1.04 kB {1} [built]
  [187] ./~/react-dom/lib/setTextContent.js 1.45 kB {1} [built]
  [188] ./~/react-dom/lib/traverseAllChildren.js 7.04 kB {1} [built]
  [189] ./~/react/lib/ReactElementSymbol.js 622 bytes {1} [built]
  [190] ./~/react/lib/ReactElementValidator.js 7.95 kB {1} [built]
  [191] ./~/react/lib/ReactPropTypesSecret.js 442 bytes {1} [built]
  [206] ./~/fbjs/lib/camelize.js 708 bytes {1} [built]
  [207] ./~/fbjs/lib/camelizeStyleName.js 1 kB {1} [built]
  [208] ./~/fbjs/lib/containsNode.js 1.05 kB {1} [built]
  [209] ./~/fbjs/lib/createArrayFromMixed.js 4.11 kB {1} [built]
  [210] ./~/fbjs/lib/createNodesFromMarkup.js 2.66 kB {1} [built]
  [211] ./~/fbjs/lib/getMarkupWrap.js 3.04 kB {1} [built]
  [212] ./~/fbjs/lib/getUnboundedScrollPosition.js 1.05 kB {1} [built]
  [213] ./~/fbjs/lib/hyphenate.js 800 bytes {1} [built]
  [214] ./~/fbjs/lib/hyphenateStyleName.js 974 bytes {1} [built]
  [215] ./~/fbjs/lib/isNode.js 693 bytes {1} [built]
  [216] ./~/fbjs/lib/isTextNode.js 605 bytes {1} [built]
  [217] ./~/fbjs/lib/memoizeStringOnly.js 698 bytes {1} [built]
  [218] ./~/fbjs/lib/performance.js 588 bytes {1} [built]
  [219] ./~/fbjs/lib/performanceNow.js 845 bytes {1} [built]
  [221] ./~/react-dom/lib/ARIADOMPropertyConfig.js 1.82 kB {1} [built]
  [222] ./~/react-dom/lib/AutoFocusUtils.js 599 bytes {1} [built]
  [223] ./~/react-dom/lib/BeforeInputEventPlugin.js 13.3 kB {1} [built]
  [224] ./~/react-dom/lib/CSSPropertyOperations.js 6.87 kB {1} [built]
  [225] ./~/react-dom/lib/ChangeEventPlugin.js 11.1 kB {1} [built]
  [226] ./~/react-dom/lib/Danger.js 2.24 kB {1} [built]
  [227] ./~/react-dom/lib/DefaultEventPluginOrder.js 1.08 kB {1} [built]
  [228] ./~/react-dom/lib/EnterLeaveEventPlugin.js 3.16 kB {1} [built]
  [229] ./~/react-dom/lib/FallbackCompositionState.js 2.43 kB {1} [built]
  [230] ./~/react-dom/lib/HTMLDOMPropertyConfig.js 5.44 kB {1} [built]
  [231] ./~/react-dom/lib/ReactChildReconciler.js 6.11 kB {1} [built]
  [232] ./~/react-dom/lib/ReactComponentBrowserEnvironment.js 906 bytes {1} [built]
  [233] ./~/react-dom/lib/ReactCompositeComponent.js 35.2 kB {1} [built]
  [234] ./~/react-dom/lib/ReactDOM.js 5.14 kB {1} [built]
  [235] ./~/react-dom/lib/ReactDOMComponent.js 38.2 kB {1} [built]
  [236] ./~/react-dom/lib/ReactDOMContainerInfo.js 967 bytes {1} [built]
  [237] ./~/react-dom/lib/ReactDOMEmptyComponent.js 1.9 kB {1} [built]
  [238] ./~/react-dom/lib/ReactDOMFeatureFlags.js 439 bytes {1} [built]
  [239] ./~/react-dom/lib/ReactDOMIDOperations.js 956 bytes {1} [built]
  [240] ./~/react-dom/lib/ReactDOMInput.js 12 kB {1} [built]
  [241] ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {1} [built]
  [242] ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {1} [built]
  [243] ./~/react-dom/lib/ReactDOMOption.js 3.69 kB {1} [built]
  [244] ./~/react-dom/lib/ReactDOMSelection.js 6.78 kB {1} [built]
  [245] ./~/react-dom/lib/ReactDOMTextComponent.js 5.82 kB {1} [built]
  [246] ./~/react-dom/lib/ReactDOMTextarea.js 6.22 kB {1} [built]
  [247] ./~/react-dom/lib/ReactDOMTreeTraversal.js 3.72 kB {1} [built]
  [248] ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {1} [built]
  [249] ./~/react-dom/lib/ReactDebugTool.js 11.7 kB {1} [built]
  [250] ./~/react-dom/lib/ReactDefaultBatchingStrategy.js 1.88 kB {1} [built]
  [251] ./~/react-dom/lib/ReactDefaultInjection.js 3.5 kB {1} [built]
  [252] ./~/react-dom/lib/ReactElementSymbol.js 622 bytes {1} [built]
  [253] ./~/react-dom/lib/ReactEventEmitterMixin.js 959 bytes {1} [built]
  [254] ./~/react-dom/lib/ReactEventListener.js 5.3 kB {1} [built]
  [255] ./~/react-dom/lib/ReactHostOperationHistoryHook.js 736 bytes {1} [built]
  [256] ./~/react-dom/lib/ReactInjection.js 1.2 kB {1} [built]
  [257] ./~/react-dom/lib/ReactInvalidSetStateWarningHook.js 984 bytes {1} [built]
  [258] ./~/react-dom/lib/ReactMarkupChecksum.js 1.47 kB {1} [built]
  [259] ./~/react-dom/lib/ReactMultiChild.js 14.6 kB {1} [built]
  [260] ./~/react-dom/lib/ReactOwner.js 3.53 kB {1} [built]
  [261] ./~/react-dom/lib/ReactPropTypeLocationNames.js 572 bytes {1} [built]
  [262] ./~/react-dom/lib/ReactReconcileTransaction.js 5.26 kB {1} [built]
  [263] ./~/react-dom/lib/ReactRef.js 2.56 kB {1} [built]
  [264] ./~/react-dom/lib/ReactServerRenderingTransaction.js 2.29 kB {1} [built]
  [265] ./~/react-dom/lib/ReactServerUpdateQueue.js 4.83 kB {1} [built]
  [266] ./~/react-dom/lib/ReactVersion.js 350 bytes {1} [built]
  [267] ./~/react-dom/lib/SVGDOMPropertyConfig.js 7.32 kB {1} [built]
  [268] ./~/react-dom/lib/SelectEventPlugin.js 6.06 kB {1} [built]
  [269] ./~/react-dom/lib/SimpleEventPlugin.js 7.97 kB {1} [built]
  [270] ./~/react-dom/lib/SyntheticAnimationEvent.js 1.21 kB {1} [built]
  [271] ./~/react-dom/lib/SyntheticClipboardEvent.js 1.17 kB {1} [built]
  [272] ./~/react-dom/lib/SyntheticCompositionEvent.js 1.1 kB {1} [built]
  [273] ./~/react-dom/lib/SyntheticDragEvent.js 1.07 kB {1} [built]
  [274] ./~/react-dom/lib/SyntheticFocusEvent.js 1.07 kB {1} [built]
  [275] ./~/react-dom/lib/SyntheticInputEvent.js 1.09 kB {1} [built]
  [276] ./~/react-dom/lib/SyntheticKeyboardEvent.js 2.71 kB {1} [built]
  [277] ./~/react-dom/lib/SyntheticTouchEvent.js 1.28 kB {1} [built]
  [278] ./~/react-dom/lib/SyntheticTransitionEvent.js 1.23 kB {1} [built]
  [279] ./~/react-dom/lib/SyntheticWheelEvent.js 1.94 kB {1} [built]
  [280] ./~/react-dom/lib/adler32.js 1.19 kB {1} [built]
  [281] ./~/react-dom/lib/checkReactTypeSpec.js 4.21 kB {1} [built]
  [282] ./~/react-dom/lib/dangerousStyleValue.js 3.02 kB {1} [built]
  [283] ./~/react-dom/lib/findDOMNode.js 2.46 kB {1} [built]
  [284] ./~/react-dom/lib/flattenChildren.js 2.77 kB {1} [built]
  [285] ./~/react-dom/lib/getEventKey.js 2.87 kB {1} [built]
  [286] ./~/react-dom/lib/getIteratorFn.js 1.12 kB {1} [built]
  [287] ./~/react-dom/lib/getNextDebugID.js 437 bytes {1} [built]
  [288] ./~/react-dom/lib/getNodeForCharacterOffset.js 1.62 kB {1} [built]
  [289] ./~/react-dom/lib/getVendorPrefixedEventName.js 2.87 kB {1} [built]
  [290] ./~/react-dom/lib/quoteAttributeValueForBrowser.js 700 bytes {1} [built]
  [291] ./~/react-dom/lib/renderSubtreeIntoContainer.js 422 bytes {1} [built]
  [292] ./~/react/lib/KeyEscapeUtils.js 1.29 kB {1} [built]
  [293] ./~/react/lib/PooledClass.js 3.68 kB {1} [built]
  [294] ./~/react/lib/ReactChildren.js 6.19 kB {1} [built]
  [295] ./~/react/lib/ReactClass.js 26.5 kB {1} [built]
  [296] ./~/react/lib/ReactDOMFactories.js 5.53 kB {1} [built]
  [297] ./~/react/lib/ReactPropTypes.js 15.8 kB {1} [built]
  [298] ./~/react/lib/ReactPureComponent.js 1.32 kB {1} [built]
  [299] ./~/react/lib/ReactVersion.js 350 bytes {1} [built]
  [300] ./~/react/lib/checkReactTypeSpec.js 4.19 kB {1} [built]
  [301] ./~/react/lib/onlyChild.js 1.34 kB {1} [built]
  [302] ./~/react/lib/traverseAllChildren.js 7.03 kB {1} [built]
  [311] multi vendor_react 40 bytes {1} [built]
chunk    {2} fb3af3d2272c98127cd3.vendor.js (vendor) 979 kB {1} [initial] [rendered]
    [0] ./~/moment/moment.js 123 kB {2} [built]
   [34] ./~/lodash/lodash.js 539 kB {2} [built]
   [60] ./~/moment/locale/af.js 2.39 kB {2} [optional] [built]
   [61] ./~/moment/locale/ar-dz.js 1.9 kB {2} [optional] [built]
   [62] ./~/moment/locale/ar-ly.js 3.71 kB {2} [optional] [built]
   [63] ./~/moment/locale/ar-ma.js 1.95 kB {2} [optional] [built]
   [64] ./~/moment/locale/ar-sa.js 2.81 kB {2} [optional] [built]
   [65] ./~/moment/locale/ar-tn.js 1.86 kB {2} [optional] [built]
   [66] ./~/moment/locale/ar.js 4.12 kB {2} [optional] [built]
   [67] ./~/moment/locale/az.js 3 kB {2} [optional] [built]
   [68] ./~/moment/locale/be.js 4.47 kB {2} [optional] [built]
   [69] ./~/moment/locale/bg.js 2.84 kB {2} [optional] [built]
   [70] ./~/moment/locale/bn.js 3.22 kB {2} [optional] [built]
   [71] ./~/moment/locale/bo.js 3.47 kB {2} [optional] [built]
   [72] ./~/moment/locale/br.js 3.11 kB {2} [optional] [built]
   [73] ./~/moment/locale/bs.js 4.47 kB {2} [optional] [built]
   [74] ./~/moment/locale/ca.js 2.71 kB {2} [optional] [built]
   [75] ./~/moment/locale/cs.js 6.1 kB {2} [optional] [built]
   [76] ./~/moment/locale/cv.js 2.14 kB {2} [optional] [built]
   [77] ./~/moment/locale/cy.js 2.74 kB {2} [optional] [built]
   [78] ./~/moment/locale/da.js 1.89 kB {2} [optional] [built]
   [79] ./~/moment/locale/de-at.js 2.79 kB {2} [optional] [built]
   [80] ./~/moment/locale/de.js 2.72 kB {2} [optional] [built]
   [81] ./~/moment/locale/dv.js 2.37 kB {2} [optional] [built]
   [82] ./~/moment/locale/el.js 3.4 kB {2} [optional] [built]
   [83] ./~/moment/locale/en-au.js 2.17 kB {2} [optional] [built]
   [84] ./~/moment/locale/en-ca.js 2.02 kB {2} [optional] [built]
   [85] ./~/moment/locale/en-gb.js 2.17 kB {2} [optional] [built]
   [86] ./~/moment/locale/en-ie.js 2.17 kB {2} [optional] [built]
   [87] ./~/moment/locale/en-nz.js 2.18 kB {2} [optional] [built]
   [88] ./~/moment/locale/eo.js 2.45 kB {2} [optional] [built]
   [89] ./~/moment/locale/es-do.js 2.7 kB {2} [optional] [built]
   [90] ./~/moment/locale/es.js 2.71 kB {2} [optional] [built]
   [91] ./~/moment/locale/et.js 2.89 kB {2} [optional] [built]
   [92] ./~/moment/locale/eu.js 2.19 kB {2} [optional] [built]
   [93] ./~/moment/locale/fa.js 2.92 kB {2} [optional] [built]
   [94] ./~/moment/locale/fi.js 3.61 kB {2} [optional] [built]
   [95] ./~/moment/locale/fo.js 1.93 kB {2} [optional] [built]
   [96] ./~/moment/locale/fr-ca.js 1.91 kB {2} [optional] [built]
   [97] ./~/moment/locale/fr-ch.js 2.07 kB {2} [optional] [built]
   [98] ./~/moment/locale/fr.js 2.05 kB {2} [optional] [built]
   [99] ./~/moment/locale/fy.js 2.42 kB {2} [optional] [built]
  [100] ./~/moment/locale/gd.js 2.4 kB {2} [optional] [built]
  [101] ./~/moment/locale/gl.js 2.56 kB {2} [optional] [built]
  [102] ./~/moment/locale/he.js 3.09 kB {2} [optional] [built]
  [103] ./~/moment/locale/hi.js 3.46 kB {2} [optional] [built]
  [104] ./~/moment/locale/hr.js 4.59 kB {2} [optional] [built]
  [105] ./~/moment/locale/hu.js 3.73 kB {2} [optional] [built]
  [106] ./~/moment/locale/hy-am.js 2.94 kB {2} [optional] [built]
  [107] ./~/moment/locale/id.js 2.67 kB {2} [optional] [built]
  [108] ./~/moment/locale/is.js 4.2 kB {2} [optional] [built]
  [109] ./~/moment/locale/it.js 2.25 kB {2} [optional] [built]
  [110] ./~/moment/locale/ja.js 1.99 kB {2} [optional] [built]
  [111] ./~/moment/locale/jv.js 2.68 kB {2} [optional] [built]
  [112] ./~/moment/locale/ka.js 2.85 kB {2} [optional] [built]
  [113] ./~/moment/locale/kk.js 2.4 kB {2} [optional] [built]
  [114] ./~/moment/locale/km.js 1.86 kB {2} [optional] [built]
  [115] ./~/moment/locale/ko.js 1.8 kB {2} [optional] [built]
  [116] ./~/moment/locale/ky.js 2.41 kB {2} [optional] [built]
  [117] ./~/moment/locale/lb.js 4.45 kB {2} [optional] [built]
  [118] ./~/moment/locale/lo.js 2.11 kB {2} [optional] [built]
  [119] ./~/moment/locale/lt.js 4.05 kB {2} [optional] [built]
  [120] ./~/moment/locale/lv.js 3.6 kB {2} [optional] [built]
  [121] ./~/moment/locale/me.js 3.77 kB {2} [optional] [built]
  [122] ./~/moment/locale/mi.js 2.22 kB {2} [optional] [built]
  [123] ./~/moment/locale/mk.js 2.86 kB {2} [optional] [built]
  [124] ./~/moment/locale/ml.js 2.56 kB {2} [optional] [built]
  [125] ./~/moment/locale/mr.js 4.84 kB {2} [optional] [built]
  [126] ./~/moment/locale/ms-my.js 2.63 kB {2} [optional] [built]
  [127] ./~/moment/locale/ms.js 2.57 kB {2} [optional] [built]
  [128] ./~/moment/locale/my.js 2.55 kB {2} [optional] [built]
  [129] ./~/moment/locale/nb.js 2.05 kB {2} [optional] [built]
  [130] ./~/moment/locale/ne.js 3.39 kB {2} [optional] [built]
  [131] ./~/moment/locale/nl-be.js 3.2 kB {2} [optional] [built]
  [132] ./~/moment/locale/nl.js 3.18 kB {2} [optional] [built]
  [133] ./~/moment/locale/nn.js 1.91 kB {2} [optional] [built]
  [134] ./~/moment/locale/pa-in.js 3.59 kB {2} [optional] [built]
  [135] ./~/moment/locale/pl.js 3.67 kB {2} [optional] [built]
  [136] ./~/moment/locale/pt-br.js 2.05 kB {2} [optional] [built]
  [137] ./~/moment/locale/pt.js 2.15 kB {2} [optional] [built]
  [138] ./~/moment/locale/ro.js 2.38 kB {2} [optional] [built]
  [139] ./~/moment/locale/ru.js 6.86 kB {2} [optional] [built]
  [140] ./~/moment/locale/se.js 2.05 kB {2} [optional] [built]
  [141] ./~/moment/locale/si.js 2.21 kB {2} [optional] [built]
  [142] ./~/moment/locale/sk.js 5.25 kB {2} [optional] [built]
  [143] ./~/moment/locale/sl.js 5.93 kB {2} [optional] [built]
  [144] ./~/moment/locale/sq.js 2.23 kB {2} [optional] [built]
  [145] ./~/moment/locale/sr-cyrl.js 3.77 kB {2} [optional] [built]
  [146] ./~/moment/locale/sr.js 3.75 kB {2} [optional] [built]
  [147] ./~/moment/locale/ss.js 2.83 kB {2} [optional] [built]
  [148] ./~/moment/locale/sv.js 2.19 kB {2} [optional] [built]
  [149] ./~/moment/locale/sw.js 1.92 kB {2} [optional] [built]
  [150] ./~/moment/locale/ta.js 3.77 kB {2} [optional] [built]
  [151] ./~/moment/locale/te.js 2.8 kB {2} [optional] [built]
  [152] ./~/moment/locale/tet.js 2.25 kB {2} [optional] [built]
  [153] ./~/moment/locale/th.js 2.14 kB {2} [optional] [built]
  [154] ./~/moment/locale/tl-ph.js 2 kB {2} [optional] [built]
  [155] ./~/moment/locale/tlh.js 3.74 kB {2} [optional] [built]
  [156] ./~/moment/locale/tr.js 2.61 kB {2} [optional] [built]
  [157] ./~/moment/locale/tzl.js 3.3 kB {2} [optional] [built]
  [158] ./~/moment/locale/tzm-latn.js 1.93 kB {2} [optional] [built]
  [159] ./~/moment/locale/tzm.js 1.89 kB {2} [optional] [built]
  [160] ./~/moment/locale/uk.js 4.97 kB {2} [optional] [built]
  [161] ./~/moment/locale/uz.js 1.86 kB {2} [optional] [built]
  [162] ./~/moment/locale/vi.js 2.46 kB {2} [optional] [built]
  [163] ./~/moment/locale/x-pseudo.js 2.29 kB {2} [optional] [built]
  [164] ./~/moment/locale/yo.js 1.98 kB {2} [optional] [built]
  [165] ./~/moment/locale/zh-cn.js 3.96 kB {2} [optional] [built]
  [166] ./~/moment/locale/zh-hk.js 3.02 kB {2} [optional] [built]
  [167] ./~/moment/locale/zh-tw.js 2.97 kB {2} [optional] [built]
  [192] (webpack)/buildin/module.js 548 bytes {2} [built]
  [220] ./~/moment/locale ^\.\/.*$ 2.61 kB {2} [optional] [built]
  [304] (webpack)/buildin/global.js 506 bytes {2} [built]
  [310] multi vendor 40 bytes {2} [built]
chunk    {3} ce5ee126441b838d0255.app.js, assets/css/app.css (app) 12.9 kB {2} [initial] [rendered]
   [56] ./app/webpack.svg 90 bytes {3} [built]
  [193] ./app/Point_es6.js 1.11 kB {3} [built]
  [196] ./app/file.css 41 bytes {3} [built]
  [198] ./app/webpack_html/img_html.html 94 bytes {3} [built]
  [199] ./app/data/data.json 183 bytes {3} [built]
  [200] ./app/file_scss.scss 1.04 kB {3} [built]
  [204] ./~/css-loader!./~/sass-loader!./app/file_scss.scss 262 bytes {3} [built]
  [205] ./~/css-loader/lib/css-base.js 1.51 kB {3} [built]
  [303] ./~/style-loader/addStyles.js 7.15 kB {3} [built]
  [308] ./app/index.js 1.46 kB {3} [built]
chunk    {4} 18755eaa92f20126c13d.component_collection.js, assets/css/component_collection.css (component_collection) 4.85 kB {2} [initial] [rendered]
  [194] ./app/react2.jsx 2.36 kB {4} [built]
  [195] ./app/react3.jsx 2.36 kB {4} [built]
  [197] ./app/img_css.css 41 bytes {4} [built]
  [306] ./app/component_collection.js 92 bytes {4} [built]
chunk    {5} b9bf4686146ad520f985.test_external.js (test_external) 332 bytes {2} [initial] [rendered]
  [201] external "jQuery" 42 bytes {5} [not cacheable]
  [307] ./app/external.js 290 bytes {5} [built]
chunk    {6} 517819e2edacb58f7406.react.js (react) 413 bytes {2} [initial] [rendered]
  [309] ./app/react.jsx 413 bytes {6} [built]
chunk    {7} 13ccb3122f204e277e1b.another.js (another) 91 bytes {2} [initial] [rendered]
  [305] ./app/another.js 91 bytes {7} [built]
chunk    {8} 1bc95dd7dad91c667477.manifest.js (manifest) 0 bytes [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.73 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader!./app/file.css 220 bytes {0} [built]
Child extract-text-webpack-plugin:
                                        Asset     Size  Chunks       Chunk Names
    test-37805d3e78d3d5edc40d43d62dc9ebf2.png  3.02 kB
    chunk    {0} extract-text-webpack-plugin-output-filename 1.82 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./app/test.png 87 bytes {0} [built]
        [2] ./~/css-loader!./app/img_css.css 223 bytes {0} [built]
[23:51:17] Finished 'webpack' after 3.88 s

嗯……有點可怕的感覺,如果要修整這些訊息的顯示,其實在 webpack 的官網關於 Stats 有參數的說明可以如何設定訊息的顯示,哪些要顯示,哪些要隱藏,其實我只要加上以下的設定,就可以簡化很多訊息(近乎就跟原來只執行 webpackwebpack-dev-server 指令時一樣):

colors: true,
children: false,
chunks: false

所以完整的 gulpfile.js 會是如下:

var gulp = require('gulp');
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

//gulp.task('default', function() {
  // place code for your default task here
//});

gulp.task("default", ["webpack-dev-server", "webpack"]);

gulp.task("webpack", function(callback) {
  // run webpack
  webpack(webpackConfig, function(err, stats) {
    if(err) throw new gutil.PluginError("webpack", err);
    gutil.log("[webpack]", stats.toString({
      colors: true,
      children: false,
      chunks: false
    }));
    callback();
  });
});

gulp.task("webpack-dev-server", function(callback) {
	var myConfig = Object.create(webpackConfig);

	// Start a webpack-dev-server
	new WebpackDevServer(webpack(myConfig), {
		publicPath: "/" + myConfig.output.publicPath,
		stats: {
          colors: true,
          children: false,
          chunks: false
		}
	}).listen(8080, "localhost", function(err) {
		if(err) throw new gutil.PluginError("webpack-dev-server", err);
		gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
	});
});

這時執行 gulp webpackgulp webpack-dev-server 指令,就會出現比較易讀的訊息囉。番外篇完結啦。/images/emoticon/emoticon58.gif


明天就是 webpack 系列文的最後一篇文章了,有點感動,最後一篇我想應該會著重在一些做網站的心得,以及一點自我介紹。希望大家在這樣的路上,都能有很好的收穫。/images/emoticon/emoticon41.gif


上一篇
<28 - 番外篇 02> webpack 與 gulp 聯手 - 整合 webpack-dev-server
下一篇
<30 - 最終章> Future!
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30

尚未有邦友留言

立即登入留言