{"id":21,"date":"2018-10-09T11:29:00","date_gmt":"2018-10-09T03:29:00","guid":{"rendered":"http:\/\/localhost\/qing\/wordpress\/?p=21"},"modified":"2018-10-09T11:32:39","modified_gmt":"2018-10-09T03:32:39","slug":"webpack-3-%e5%8d%87%e7%ba%a74%ef%bc%88%e4%b8%80%ef%bc%89","status":"publish","type":"post","link":"https:\/\/adeqing.com\/index.php\/2018\/10\/09\/default\/21\/","title":{"rendered":"webpack 3 \u5347\u7ea74\uff08\u4e00\uff09"},"content":{"rendered":"

\u5347\u7ea7\u8fc7\u7a0b<\/h1>\n

1.\u5347\u7ea7<\/span>webpack<\/strong><\/h2>\n
\n

npm i webpack@latest webpack-cli –save-dev<\/p>\n<\/blockquote>\n

\u629b\u51fa\u5982\u4e0b\u9519\u8bef<\/p>\n

shaoyundeMacBook-Pro:koc-marketing-site neal$ npm run dev-d-business<\/p>\n

> koc-marketing-site@1.0.0 dev-d-business \/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site
\n> node bin\/run dev d-business<\/p>\n

(node:55308) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
\n(node:55308) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 dev complete. \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 stie [d-business] dev complete. server listening on 4002 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_html-webpack-plugin@2.30.1@html-webpack-plugin\/lib\/compiler.js:81
\nvar outputName = compilation.mainTemplate.applyPluginsWaterfall(‘asset-path’, outputOptions.filename, {
\n^<\/p>\n

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
\nat \/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_html-webpack-plugin@2.30.1@html-webpack-plugin\/lib\/compiler.js:81:51
\nat compile (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_webpack@4.20.2@webpack\/lib\/Compiler.js:290:11)
\nat hooks.afterCompile.callAsync.err (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_webpack@4.20.2@webpack\/lib\/Compiler.js:547:14)
\nat AsyncSeriesHook.eval [as callAsync] (eval at create (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/HookCodeFactory.js:32:10), <anonymous>:6:1)
\nat AsyncSeriesHook.lazyCompileHook (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/Hook.js:154:20)
\nat compilation.seal.err (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_webpack@4.20.2@webpack\/lib\/Compiler.js:544:30)
\nat AsyncSeriesHook.eval [as callAsync] (eval at create (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/HookCodeFactory.js:32:10), <anonymous>:6:1)
\nat AsyncSeriesHook.lazyCompileHook (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/Hook.js:154:20)
\nat hooks.optimizeAssets.callAsync.err (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_webpack@4.20.2@webpack\/lib\/Compilation.js:1296:35)
\nat AsyncSeriesHook.eval [as callAsync] (eval at create (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/HookCodeFactory.js:32:10), <anonymous>:6:1)
\nat AsyncSeriesHook.lazyCompileHook (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/Hook.js:154:20)
\nat hooks.optimizeChunkAssets.callAsync.err (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_webpack@4.20.2@webpack\/lib\/Compilation.js:1287:32)
\nat _err0 (eval at create (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_tapable@1.1.0@tapable\/lib\/HookCodeFactory.js:32:10), <anonymous>:11:1)
\nat \/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin\/dist\/index.js:287:11
\nat Runner.runTasks (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin\/dist\/uglify\/Runner.js:67:9)
\nat UglifyJsPlugin.optimizeFn (\/Users\/neal\/qwom\/KOC.Marketing\/koc-marketing-site\/node_modules\/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin\/dist\/index.js:198:16)
\nnpm ERR! code ELIFECYCLE
\nnpm ERR! errno 1
\nnpm ERR! koc-marketing-site@1.0.0 dev-d-business: `node bin\/run dev d-business`
\nnpm ERR! Exit status 1
\nnpm ERR!
\nnpm ERR! Failed at the koc-marketing-site@1.0.0 dev-d-business script.
\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.<\/p>\n

npm ERR! A complete log of this run can be found in:
\nnpm ERR! \/Users\/neal\/.npm\/_logs\/2018-10-09T02_51_58_881Z-debug.log<\/p><\/blockquote>\n

\u89e3\u51b3\u529e\u6cd5<\/p>\n

cnpm install extract-text-webpack-plugin@latest html-webpack-plugin@latest –save-dev<\/p><\/blockquote>\n

2.\u629b\u51fa\u8b66\u544a<\/strong><\/h2>\n

WARNING Compiled with 3 warnings 11:19:06<\/p>\n

warning<\/p>\n

configuration
\nThe ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
\nYou can also set it to ‘none’ to disable any default behavior. Learn more: https:\/\/webpack.js.org\/concepts\/mode\/<\/p>\n

warning<\/p>\n

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
\nThis can impact web performance.
\nAssets:
\nstatic\/d-business\/img\/ionicons.a2c4a26.svg (542 KiB)
\njs\/index.js (6.49 MiB)
\njs\/vendors~index.lazy.index.js (707 KiB)<\/p>\n

warning<\/p>\n

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
\nEntrypoints:
\nindex (6.49 MiB)
\njs\/index.js<\/p><\/blockquote>\n

 <\/p>\n

\u4fee\u6539\u914d\u7f6e\u6587\u4ef6webpack.Dev.conf\u548cwebpack.prod.conf<\/h5>\n
\u589e\u52a0mode\uff0c\u5220\u9664webpack.DefinePlugin<\/h5>\n

\u5220\u9664<\/p>\n

devtool: configBuild.prod.productionSourceMap ? '#source-map' : false,<\/del>\r\nplugins: [<\/del>\r\n  \/\/ http:\/\/vuejs.github.io\/vue-loader\/en\/workflow\/production.html<\/del>\r\n  new webpack.DefinePlugin({<\/del>\r\n    'process.env': configBuild.prod.env<\/del>\r\n  }),\r\n<\/del><\/pre>\n
\u589e\u52a0<\/p>\n
devtool: configBuild.prod.productionSourceMap ? '#source-map' : false,\r\nmode: 'production',\r\nplugins: [\r\n  \/\/ http:\/\/vuejs.github.io\/vue-loader\/en\/workflow\/production.html\r\n  \/\/ new webpack.DefinePlugin({\r\n  \/\/   'process.env': configBuild.prod.env\r\n  \/\/ }),<\/pre>\n
\u53c2\u8003<\/p>\n
https:\/\/juejin.im\/post\/5b0a6d366fb9a07aa213d16a#heading-1<\/p><\/blockquote>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u5347\u7ea7\u8fc7\u7a0b 1.\u5347\u7ea7webpack npm i webpack@latest webpack-cli &#821 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/posts\/21"}],"collection":[{"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":6,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/posts\/21\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adeqing.com\/index.php\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}