博客

webpack 3 升级4（一）

升级过程

1.升级webpack

npm i webpack@latest webpack-cli –save-dev

抛出如下错误

shaoyundeMacBook-Pro:koc-marketing-site neal$ npm run dev-d-business

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

(node:55308) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:55308) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ dev complete. │
├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ stie [d-business] dev complete. server listening on 4002 │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/lib/compiler.js:81
var outputName = compilation.mainTemplate.applyPluginsWaterfall(‘asset-path’, outputOptions.filename, {
^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
at /Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/lib/compiler.js:81:51
at compile (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_webpack@4.20.2@webpack/lib/Compiler.js:290:11)
at hooks.afterCompile.callAsync.err (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_webpack@4.20.2@webpack/lib/Compiler.js:547:14)
at 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)
at AsyncSeriesHook.lazyCompileHook (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_tapable@1.1.0@tapable/lib/Hook.js:154:20)
at compilation.seal.err (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_webpack@4.20.2@webpack/lib/Compiler.js:544:30)
at 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)
at AsyncSeriesHook.lazyCompileHook (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_tapable@1.1.0@tapable/lib/Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_webpack@4.20.2@webpack/lib/Compilation.js:1296:35)
at 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)
at AsyncSeriesHook.lazyCompileHook (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_tapable@1.1.0@tapable/lib/Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (/Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_webpack@4.20.2@webpack/lib/Compilation.js:1287:32)
at _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)
at /Users/neal/qwom/KOC.Marketing/koc-marketing-site/node_modules/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin/dist/index.js:287:11
at 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)
at 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)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! koc-marketing-site@1.0.0 dev-d-business: `node bin/run dev d-business`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the koc-marketing-site@1.0.0 dev-d-business script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/neal/.npm/_logs/2018-10-09T02_51_58_881Z-debug.log

解决办法

cnpm install extract-text-webpack-plugin@latest html-webpack-plugin@latest –save-dev

2.抛出警告

WARNING Compiled with 3 warnings 11:19:06

warning

configuration
The ‘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.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
static/d-business/img/ionicons.a2c4a26.svg (542 KiB)
js/index.js (6.49 MiB)
js/vendors~index.lazy.index.js (707 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
index (6.49 MiB)
js/index.js

 

修改配置文件webpack.Dev.conf和webpack.prod.conf
增加mode，删除webpack.DefinePlugin

删除

devtool: configBuild.prod.productionSourceMap ? '#source-map' : false,
plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  new webpack.DefinePlugin({
    'process.env': configBuild.prod.env
  }),

增加

devtool: configBuild.prod.productionSourceMap ? '#source-map' : false,
mode: 'production',
plugins: [
  // http://vuejs.github.io/vue-loader/en/workflow/production.html
  // new webpack.DefinePlugin({
  //   'process.env': configBuild.prod.env
  // }),

参考

https://juejin.im/post/5b0a6d366fb9a07aa213d16a#heading-1

 

发表回复

关闭菜单