详解基于Vue cli生成的Vue项目的webpack4升级

大佬教程收集整理的这篇文章主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前面的话@H_675_2@ @H_944_3@

本文将详细介绍从webpack3到webpack4的升级过程@H_944_3@

概述@H_675_2@ @H_944_3@

相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除，新增的optimization使用简单@H_944_3@

在未来，CSS、HTMl和文件都会成为原生模块@H_944_3@

【0配置】@H_675_2@@H_944_3@

webpack4 设置了默认值，以便无配置启动项目@H_944_3@

1. entry 默认值是 ./src/
2. output.path 默认值是 ./dist
@H_984_21@mode 默认值是 production

【模块类型】@H_675_2@@H_944_3@

webpack4提供了5种模块类型@H_944_3@

1. json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
2. webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型）
3. javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。
4. javascript/esm: EcmaScript模块（默认 .mjs 文件）。
5. javascript/dynamic: 仅支持 CommonJS & AMD。

webpack 4 不仅支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时，webpack 会消除掉JSON Module 中未使用的导出。此外，如果要用 loader 转换 json 为 js，需要设置 type 为 javascript/auto@H_944_3@

模式mode@H_675_2@ @H_944_3@

相比于webpack3，webpack4新增了@L_656_19@mode配置选择，用来表示配置模式的选择情况@H_944_3@

大佬总结

以上是大佬教程为你收集整理的详解基于Vue cli生成的Vue项目的webpack4升级全部内容，希望文章能够帮你解决详解基于Vue cli生成的Vue项目的webpack4升级所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。