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

最新推荐文章于 2021-09-05 15:58:45 发布

原创最新推荐文章于 2021-09-05 15:58:45 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了深入掌握webpack的重要性，特别是在多终端开发背景下，它对于打包构建的必要性。文章指出，webpack的核心功能包括模块处理、配置灵活性、插件系统等，但也带来了学习曲线。初学者面临的挑战包括理解各种新概念，如entry、output、loaders、plugins等。此外，文章还强调了构建工具在转换ES6语法、处理JSX、预处理器和性能优化等方面的作用，并简要介绍了webpack的基本使用和配置流程。

基础篇内容

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

为什么要深入掌握webpack

与应用场景的开发方式息息相关
手机移动平板和可穿戴设备的普及, web前端开发触角从传统的pc页面开发发展到多终端的开发, 我们需要兼顾pc/H5等多种不同分辨率的页面开发. 因此针对不同的应用场景, 做不同的打包就显得很重要,如pc端的中后台应用,我们需要针对支持单页应用的打包构建, H5页面对性能和可访问性有极高要求,因此需要通过构建来支持服务端渲染和PWA离线缓存
node.js自2009年发布以来, node.js社区异常繁荣,迄今为止有80多万第三方插件/组件,且还在每天快速增加. 而npm组件在浏览器端的js代码中不能直接使用,这需要借助webpack等构建工具来快速复用各种优秀成熟的组件,从而加速web的开发
当下前端最为流行的三大框架React/Angular.js/Vue,里面的一些语法如JSX和Vue指令无法在浏览器中直接解析,需要借助构建工具进行转换
webpack是前端构建领域最耀眼的一颗星, 无论哪条路线, 都需要很强的webpack知识,熟悉webpack的知识和应用场景, 能拓宽前端技术栈,在发现页面打包的速度和资源体积问题时,能够知道如何排查问题和优化;同时熟悉webpack的原理,有助于其他跨端应用的开发,如对小程序Weex/React Native/Electron等框架的打包时,能快速上手

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

一切皆为模块
js文件/HTML CSS/图片/字体都可以成为模块
webpack的配置异常灵活,且具备强大的插件化拓展能力
需要了解webpack里面众多新的概念
entry / output / mode / loaders / plugins / 热更新 / code spliting / tree shaking等等
webpack有学习曲线
webpack打包的速度/体积/页面加载时的性能优化等,需要具备比较全面的webpack专业知识,搞懂webpack内部的运行原理和插件机制才能深入掌握

构架工具的作用,及必要性

转换ES6语法
在低版本的浏览器支持的不是很好,需要构建工具转化ES6语法
转换JSX
三大框架React/Angular.js/Vue,里面的一些语法如JSX和Vue指令无法在浏览器中直接解析,需要借助构建工具进行转换
CSS前缀补全 / 预处理器
less / sass等
压缩文件
图片压缩

前端构建工具的演变之路

ant + YUI Tool ----> grunt ----> fis3 / glup -----> rollup / webpack / parcel

webpack基本使用

配置文件

webpack默认配置文件: webpack.config.js
可在package.json中通过webpack --config 指定配置文件,
如:
开发环境 webpack --config webpack.dev.config.js
生产环境webpack --config webpack.product.config.js
配置组成

// demo
module.exports = {
	entry: './src/index.js',	 // 打包的入口文件
	output: './dist/main.js',	 // 打包的输出文件
	mode: 'production', 		// 环境 production和development和none
	module: {
		rules: [			 	// loader 配置
			{ test: /\.txt$/, use:'raw-loader'}
		]
	},
	plugins: [
		new HtmlwebpackPlugin({ // 插件配置
			template: './src/index.html'
		})
	]
}