2024年Web前端最全拥抱webpack4，有效缩减构建时间57%+，不断提升自己创造溢价的能力

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

“@fullcalendar/daygrid”: “^4.2.0”,

“@fullcalendar/interaction”: “^4.2.0”,

“@fullcalendar/vue”: “^4.2.2”,

“axios”: “0.18.1”,

“babel-polyfill”: “6.26.0”,

“echarts”: “4.0.4”,

“element-ui”: “2.10.0”,

“jquery”: “3.3.1”,

“js-cookie”: “2.2.0”,

“js-md5”: “0.7.3”,

“lodash”: “4.17.5”,

“moment”: “^2.24.0”,

“node-sass”: “^4.11.0”,

“normalize.css”: “7.0.0”,

“nprogress”: “0.2.0”,

“qs”: “6.5.1”,

“vue”: “2.6.10”,

“vue-router”: “3.0.3”,

“vuex”: “3.1.1”

},

“devDependencies”: {

“autoprefixer”: “9.6.1”,

“babel-core”: “6.26.3”,

“babel-eslint”: “10.0.3”,

“babel-helper-vue-jsx-merge-props”: “2.0.3”,

“babel-loader”: “^7.1.5”,

“babel-plugin-syntax-jsx”: “6.18.0”,

“babel-plugin-transform-runtime”: “6.23.0”,

“babel-plugin-transform-vue-jsx”: “3.7.0”,

“babel-preset-env”: “1.7.0”,

“babel-preset-stage-2”: “6.24.1”,

“chalk”: “2.4.2”,

“copy-webpack-plugin”: “5.0.4”,

“css-loader”: “3.2.0”,

“eslint”: “6.3.0”,

“eslint-friendly-formatter”: “3.0.0”,

“eslint-import-resolver-webpack”: “^0.11.1”,

“eslint-loader”: “3.0.0”,

“eslint-plugin-vue”: “^5.2.3”,

“eventsource-polyfill”: “0.9.6”,

“file-loader”: “4.2.0”,

“friendly-errors-webpack-plugin”: “1.7.0”,

“html-webpack-plugin”: “3.2.0”,

“mini-css-extract-plugin”: “^0.8.0”,

“node-notifier”: “5.1.2”,

“optimize-css-assets-webpack-plugin”: “3.2.0”,

“ora”: “1.3.0”,

“portfinder”: “1.0.13”,

“postcss-import”: “12.0.1”,

“postcss-loader”: “3.0.0”,

“rimraf”: “2.6.2”,

“sass-loader”: “8.0.0”,

“semver”: “5.4.1”,

“shelljs”: “0.7.8”,

“svg-sprite-loader”: “4.1.6”,

“uglifyjs-webpack-plugin”: “2.2.0”,

“url-loader”: “2.1.0”,

“vue-loader”: “15.7.1”,

“vue-style-loader”: “4.1.2”,

“vue-template-compiler”: “2.6.10”,

“webpack”: “4.39.3”,

“webpack-bundle-analyzer”: “3.4.1”,

“webpack-cli”: “^3.3.8”,

“webpack-dev-server”: “3.8.0”,

“webpack-merge”: “4.2.2”

}

第一步

---

升级webpack到4.39.3版本，npm run dev遇到了报错…

npm run dev报错

---

webpack-dev-server版本过低

Error: Cannot find module ‘webpack/bin/config-yargs’

应该是webpack与webpack-dev-server版本不符，于是升级webpack-dev-server到3.8.0版本。

webpack-cli缺失

The CLI moved into a separate package: webpack-cli

Please install ‘webpack-cli’ in addition to webpack itself to use the CLI

-> When using npm: npm i -D webpack-cli

-> When using yarn: yarn add -D webpack-cli

internal/modules/cjs/loader.js:584

throw err;

^

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

webpack4将webpack-cli单独分离出来了，因此提示我们安装webpack-cli，那就直接安装吧。

html-webpack-plugin版本问题

10% building 2/2 modules 0 active(node:8596) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

(node:8596) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

53% building 363/366 modules 3 active D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\core-js\modules_array-reduce.jsD:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\html-webpack-plugin\lib\compiler.js:81

var outputName = compilation.mainTemplate.applyPluginsWaterfall(‘asset-path’, outputOptions.filename, {

^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

考虑是html-webpack-plugin版本问题，升级至3.2.0

extract-text-webpack-plugin?

10% building 2/2 modules 0 active(node:19732) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

查到是因为extract-text-webpack-plugin不再支持webpack4.3，需要改用mini-css-extract-plugin。

ps: extract-text-webpack-plugin是用来抽取依赖的.css文件的，防止样式全部打包在js bundle里太大。改用了mini-css-extract-plugin后，该报错并未消除，考虑要用compiler钩子重写一些东西，先在这埋个坑，后面弄明白了再来填坑。

eslint-loader升版本

Module build failed (from ./node_modules/eslint-loader/index.js):

TypeError: Cannot read property ‘eslint’ of undefined

at Object.module.exports (D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\eslint-loader\index.js:148:18)

升级eslint-loader

file-loader升版本

Module build failed (from ./node_modules/file-loader/dist/cjs.js):

TypeError: Cannot read property ‘context’ of undefined

at Object.loader (D:\coollu\projects\coollu-v3\source-code\develop\coollu-cloud-web\node_modules\file-loader\dist\index.js:34:49)

升级file-loader

npm run build报错

---

改用splitChunks

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

使用webpack4的optimization.splitChunks替代CommonsChunkPlugin

vue-loader升版本

ERROR in ./src/App.vue?vue&type=style&index=0&id=7c362b6c&lang=scss&scoped=tr (./node_modules/mini-css-extract-plugin/dist/loader.js??ref–10-0!./node_mods/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&id=62b6c&lang=scss&scoped=true&)

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.:

ModuleParseError: Module parse failed: Unexpected character ‘#’ (14:0)

File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js

You may need an additional loader to handle the result of these loaders.

考虑是vue-loader版本问题，先升级vue-loader@15.7.1

babel-loader降版本

ERROR in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Cannot find module ‘@babel/core’

babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.

把babel-loader@8降低了版本，调整为babel-loader@7

ps: 想了一下，觉得可能其他的loader版本也会过低，于是将其他的loader都进行了升级，具体见package.json。

优化打包速度

---

happypack

一个号称用多进程策略提升webpack打包速度的插件，真的挺管用的。

happypack允许您并行转换多个文件，从而加快了webpack的构建速度。

安装：

npm install --save-dev happypack

简单配置如下：

const HappyPack = require(‘happypack’)

// webpack配置，只列出关于happypack的配置

rules: [

// …其他rule

{

test: /.js$/,

// 注释掉原来的babel-loader，改用happypack/loader

// loader: “babel-loader”,

use: [‘happypack/loader’],

include: [

resolve(“src”)

]

}

],

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它