摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。
引言
最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为一位出色的前端工程师。
我大致梳理了一下我的学习历程，将它简单的归类，以解决问题的路径娓娓道来。当然我的学习也不算完整，还在继续努力，也请各位大佬多多指导。
学习webpack首先必须拥有的基础是：
1.了解node.js是什么；
2.了解npm包管理器是什么以及package.json的常用属性的意义；
在此基础上，我们来一步步的学习webpack，以及如何使用webpack进行打包。
webpack 简介webapck是一款前端资源打包工具，其最核心的功能是解决模块之间的依赖问题。听起来是不是很耳熟？对，没错，如果你学习过AMD规范、CommonJS规范，你会发现webpack是在这些规范的基础上发展出来的开源工具，解决前端开发人员模块化到工程化的问题。（PS:没有了解过AMD、CommonJS的小伙伴建议去简单了解一下，因为这是js模块化的基础，了解该基础才能理解前端模块化，而进一步理解前端工程化，才能明白webpack到底在干什么。）
这里简单说一下js模块化。很多小伙伴从切图仔进阶到前后端分离的前端工程模式时，都有些犯怵，一下子不理解前端工程到底是个什么概念，其实前端工程化说白了，就是在开发中大型web应用时，页面的交互非常频繁，很多计算、数据处理、业务代码都放在客户端（浏览器）进行处理了。那这么多的代码，怎么进行管理和维护呢，难道还是按照不同的页面
首先我们选择菜单-安装
出于学习的目的，大家可以选择全局安装。而如果出于项目制作的考虑，以及可能会用到Git进行版本控制和分享，我推荐大家进行本地安装。使用本地安装，webpack会存于node_modules文件夹内与devDependencies属性内，更方便项目文件迁移以及协同开发等情况。
使用webpack需要安装3个包，分别是
1.webpack（核心包）
2.webpack-cli（脚手架）
3.webpack-dev-server（开发服务器）
webpack核心包，顾名思义，是基础，必须使用的包。
webpack-cli脚手架，是可以帮助我们在使用webpack的时候，减少一些需要手动配置的选项，更方便我们使用自定义配置的工具，从wepback v4.0开始必须安装
webpack-dev-server是我们在开发环境时，不可能每一次调试都重新构建一次。所以一个热重载的服务器就很有必要。
使用npm命令：
npm install --save-dev webpack webpack-cli webpack-dev-server
好的，安装成功。
未完待续...文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106460.html
摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...
摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...
摘要：运行该语句会执行如下步骤使用进行文件压缩。设置环境变量，触发某些包，以不同的方式进行编译。在原始的源码中执行查找和替换操作。等同于表示任何出现的地方都会被替换为。提供函数用来合并配置对象当文件小于限制，会返回。 选项 1.devtool：通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试。 2.resolve.alias:创建 impor...
摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。 最近开始想要维护一个个人的公众...
阅读 1773·2021-09-22 15:54
阅读 1637·2021-09-04 16:40
阅读 664·2019-08-30 15:56
阅读 2493·2019-08-30 15:44
阅读 2026·2019-08-30 13:52
阅读 982·2019-08-29 16:35
阅读 3227·2019-08-29 16:31
阅读 2470·2019-08-29 13:48
