学习webpack--基础篇(1):webpack的基本介绍

基础篇内容

1. webpack的核心概念和开发必备技巧

为什么要深入掌握webpack

1. 与应用场景的开发方式息息相关
   手机 移动平板和可穿戴设备的普及, web前端开发触角从传统的pc页面开发发展到多终端的开发, 我们需要兼顾pc/H5等多种不同分辨率的页面开发. 因此针对不同的应用场景, 做不同的打包就显得很重要,如pc端的中后台应用,我们需要针对支持单页应用的打包构建, H5页面对性能和可访问性有极高要求,因此需要通过构建来支持服务端渲染和PWA离线缓存

2. node.js自2009年发布以来, node.js社区异常繁荣,迄今为止有80多万第三方插件/组件,且还在每天快速增加. 而npm组件在浏览器端的js代码中不能直接使用,这需要借助webpack等构建工具来快速复用各种优秀成熟的组件,从而加速web的开发

3. 当下前端最为流行的三大框架React/Angular.js/Vue,里面的一些语法如JSX和Vue指令无法在浏览器中直接解析,需要借助构建工具进行转换

4. webpack是前端构建领域最耀眼的一颗星, 无论哪条路线, 都需要很强的webpack知识,熟悉webpack的知识和应用场景, 能拓宽前端技术栈,在发现页面打包的速度和资源体积问题时,能够知道如何排查问题和优化;同时熟悉webpack的原理,有助于其他跨端应用的开发,如对小程序Weex/React Native/Electron等框架的打包时,能快速上手

初学者学习webpack的过程中会遇到哪些困哪

1. 一切皆为模块
   js文件/HTML CSS/图片/字体都可以成为模块

2. webpack的配置异常灵活,且具备强大的插件化拓展能力

3. 需要了解webpack里面众多新的概念
   entry / output / mode / l