前端最火工具webpack4.0中级教程

《webpack4.0各个击破系列》适合不满足于只会配置webpack但一时间又看不懂源码的中级读者。我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+CCtrl+V的博文有本质的区别,不信你读读看。

一.webpack是什么

中文版官方网址:www.webpackjs.com

webpack是前端最火的打包工具,是大前端自动化工厂的重要组成部分。上面的LOGO已经非常形象地表达了webpack所做的最主要的事情——打包,尽管它为非常多的工具提供了适配接口,但官网仍然推荐将webpack作为自动化工具链的一部分集成进更大的工具系统,而不是将一切需求的实现都寄希望于webpack

二.webpack4.0各个击破系列

《webpack4.0各个击破系列》是笔者原创的webpack4.0使用指南,它并不像其他教程那样一步一步贴着图来演示配置方法,而是通过问题+推演的方式,从打包需要解决的问题,对应的处理策略,以及webpack相关的一些配置和原理等进行综合讲解。如果你还没有使用过webpack,那么建议你先阅读官方文档和一些入门级的配置教程(它们可能已经过时了,社区里针对webpack4.0以上版本的博文并不多,而且大多数都只是在重复官网已经声明过的问题)。如果你想从“为什么”的层面上理解webpack,那么阅读本系列一定会带给你收获。

三.webpack4.0进阶话题

如果上面的内容中涉及的大多数知识你已经掌握,那么下面的文章应该能够帮助你进一步提高。

  • awesome-webpack

    这个项目里搜罗了非常多的webpack相关的优秀文章,从入门到源码都有。在阅读完笔者的《webpack4.0各个击破》系列后,按照这个列表来查漏补缺就再好不过了。

  • 【如何实现一个简单的webpack】

    这个系列只写了3篇,作者用造轮子的方法演示了webpack最基本的功能,建议有时间感兴趣的同学自己试试看,一定会有收获。

  • 【浅析webpack源码系列】

    作者通过30多篇博文,按照webpack的执行周期,非常详细地讲述了webpack源码中各个模块的作用和基本原理,希望深入研究webpack的读者一定不要错过。

原文地址:http://blog.51cto.com/13869008/2167792

时间: 2024-11-11 10:14:11

前端最火工具webpack4.0中级教程的相关文章

ThinkPHP命令行工具Tptool2.0使用教程

经常需要用ThinkPHP开发项目,总感觉手动创建控制器.模型.视图是一件繁琐的事情,需要不停地复制粘贴.还有当文件夹的层级很深时,来回找文件也是一件很耗时的事情. 我一直坚信:工具善其事,必先利其器.在借鉴国外的一些框架如ExtJS和Yii后,我想到了开发一个命令行工具来简化操作.基于ThinkPHP3.2开发~ 工具下载地址:https://git.oschina.net/jiusem/Tptool 安装 将项目解压到D盘下,形成的目录是D:\tptool,并将该路径添加到环境变量. 使用

1、CC2541蓝牙4.0芯片中级教程——基于OSAL操作系统的运行流程了解+定时器和串口例程了解

本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 中级教程-OSAL操作系统(OSAL系统解基本套路) 中级教程-OSAL操作系统(进一步了解-OLED && 普通按键和5方向按键-中断!!!)这个系统驱动层和应用层不一样~ 中级教程-OSAL操作系统(ADC-光敏电阻) OSAL操作系统-实验16 串口波特率扩展 OSAL操作系统-实验1

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

webpack4.0各个击破(2)—— CSS篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定

webpack4.0各个击破(4)—— Javascript & splitChunk

目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 代码混淆压缩 四. 细说splitChunks技术 4.1 参数说明 4.2 参数配置 4.3 代码分割实例 五. 参考及附件说明 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建

webpack4.0各个击破(5)—— Module篇

webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 使用webpack对脚本进行合并是非常方便的,因为webpack实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种实现方式比学习如何配置w

webpack4.0各个击破(9)—— karma篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. webpack与自动化测试 webpack对应的关键词是模块化,它的主要任务就是打包和管理模块,所以首先需要明确的概念就是webpack之所以关联自动化测试,是因为它能够为测试脚本提供模块管理的能力,

webpack4.0各个击破(10)—— Integration篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自动化处

个人前端工程师开发工具记录

原文地址:https://www.zybuluo.com/yyman001/note/58799 个人前端工程师开发工具记录 我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的前端工具记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧! 前端环境软件安装 node.js 很多东西都需要它 npm , cnpm , spm 安装可以更换淘宝的安装包地址(淘宝镜像) Ruby(git依赖) ,