《深入浅出Webpack》阅读笔记(一)
一、基础入门
首先主要了解webpack时做什么的?我们为什么要使用webpack?基础的安装与使用,以及常用的构建工具的介绍与对比。
1、前端发展现状
为了应对复杂而强大的web应用,前端社区出现了许多新的框架与思想
-
模块化
模块化是指将一个复杂的系统分解为多个模块从而方便编码。
(1)commonJS是一种被广泛使用的JavaScript模块化规范,核心思想是通过通过使用
require
的方法来同步加载依赖的其他模块。然后使用module.exports
导出。
采用commonJS导入导出的代码实例如下://导入 const moduleA = require('./moduleA'); //导出 module.export = moduleA.someFunc;
优点:commonJS的代码可以复用于Node.js环境下并运行;通过npm发布的第三模块均采用CommonJS的规范。
缺点:代码无法直接运行在浏览器环境下,需要转换成标准的ES5。
(2)AMD一种JavaScript模块化规范,采用异步的方式加载依赖的模块,主要用于解决针对浏览器环境的模块化问题。
采用AMD导入及导出的代码如下://定义一个模块 define('module' , ['dep'] , function(dep)){ return exports; }); //导入和使用 require([ 'module' ], function(module){ });
优点:可以在不转换代码的情况下直接运行;可以异步加载依赖;代码可以运行在浏览器环境和Node.js环境下。
缺点:JavaScript运行环境没有原生支持AMD,需要先导入实现了AMD的库后才能正常使用。
(3)ES6模块化在语言层面实现可模块化,其将逐渐取代CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
采用ES6模块化导入和导出的代码如下://导入 import { readFile } from 'fs'; import React from 'react'; //导出 export function hello () {}; export default { // ... }
缺点无法直接运行在大部分JavaScript运行环境下,必须通过工具转换成标准的ES5后才能正常运行。
(4)样式文件中的模块化除了JavaScript开始进行模块化改造外,样式文件也支持了模块化。 -
新框架
(1)React:引入可JSX语法到JavaScript语言层面中,可以更加灵活地控制视图的渲染逻辑。该语法需要转换才能运行在JavaScript引擎中。
(2)Vue:将于组件相关的HTML模板,JavaScript逻辑代码,CSS样式代码都写下一个文件中。
(3)Angular2:推崇才哟并Typescript语言开发应用,并且可以注解语法描述组件的各个属性。 -
新语言
为了解决JavaScript在开发大型应用时的语言缺陷,同时解决CSS无法增加逻辑判断与共享变量的问题,出现了许多新的语言。
(1)ES6:引入了很多新的语法如:规范模块化、Class语法、使用let
声明变量,使用const
声明常量、箭头函数、async
函数、Set
和Map
数据结构等等。缺点是存在兼容性问题,需要将ES6转换成ES5,Babel是目前解决这个问题的优秀工具。
(2)Typescript:JavaScript的一个超集,除了支持ES6的所有功能,还提供了静态类型检查,在编写大型应用时,不同的模块可能由不同的人编写,在对接不同的模块时,静态类型检查会在编译阶段找出可能存在的问题。缺点:无法再浏览器或Node.js环境下直接运行。
(3)Flow:主要特点也是为JavaScript提供静态类型检查。
(4)SCSS:CSS预处理器,可以方便的管理代码,抽离公共部分,写出更加灵活的代码,相似的还有less。
2、 常见的构建工具对比
问题: 各种框架和新思想层出不穷,但是他们存在一个共同的问题:源代码无法直接运行,必须通过转换后才可以正常的运行。
如何解决:构建就是为了解决上述问题而存在的,将源代码转换成可以执行的JavaScript、CSS、HTML代码。主要包括如下几项工作:代码转换、文件优化(压缩代码文件)、代码分割(提取公共代码,提取首屏不需要加载的代码让其异步加载)、模块合并、自动刷新(监听本地源代码的改变,自动重新构建和刷新)、代码校验、自动发布
那么什么是构建?
构建是工程化、自动化思想在前端开发中的体现,将一系列流程用代码去实现,让代码自动化的执行这一系列复杂的流程。
大多数构建工具是通过Node.js 开发的,下文简要介绍几种常用的构建工具。
-
Npm Script
Npm Script是一个任务执行者,npm是node的包管理器,npm script则是npm内置的一个功能,允许在package.json文件中使用script字样定义任务。
{ "scripts" : { "dev" : "node dev.js", "pub" : "node build.js" } }
优点:内置,无需安装其他依赖,
缺点:功能太简单 -
Grunt
Grunt也是一个任务执行者,有大量的插件封装了常见的任务,也能管理任务之间的依赖,自动化的执行依赖的任务,每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js中。
优点:灵活,只负责执行定义的任务,大量的可复用插件封装了常见的构建任务
缺点:集成度不高,要写很多配置才可以用,无法做到开箱即用。 -
Gulp
Gulp是一个基于流的自动化构建工具,除了可以管理和执行任务,还支持监听文件、读写文件。
优点:灵活,可以单独完成构建,也可以和其他工具搭配使用。
缺点:集成度不高,要写很多配置才可以用,无法做到开箱即用。 -
Fis3
集成了常用的构建功能:读写文件、资源定位、文件指纹、文件编译、压缩文件、图片合并。
缺点:目前官方不再更新和维护,不支持最新版本的Node。 -
Webpack
Webpack是一个打包模块化JavaScript的工具,在Webpack中一切文件皆模块,通过loader转换文件,通过Plugin注入钩子,最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
JavaScript、CSS、SCSS、图片、模板等对webpack而言都是模块,经过webpack的处理最终会输出浏览器能够使用的静态资源。
使用方法如下:module.exports = { //所有模块的入口, Webpack从入口开始递归解析出所有依赖的模块 entry:’./app.j s’, entry: "./app.js", output: { // 将入口所依赖的所有模块打包成一个文 件 bundle.j s 输出 filename: "bundle.js" } }
优点:专注于处理模块化的项目,做到开箱即用、一步到位;可以通过plugin扩展;使用场景不局限于web开发;社区庞大活泼;良好的开发体验。
缺点:只能用于采用模块化开发的项目。 -
Rollup
Rollup是一个专注于ES6的模块打包工具。能针对ES6源码进行tree shaking,去除那些已被定义但是未被使用的代码,并进 行 Scope Hoisting,以减小输出文件的大小和提升运行性能。
为什么选择webpack
(1)大部分技术团队采用“模块化+新语言+新框架”,webpack可以为这些新项目提供一站式的解决方案。
(2)Webpack有良好的生态量和维护团队。
(3)webpack已被大量开发者使用和验证。
3、webpack安装教程
在执行构建任务时需要webpack的可执行文件启动构建任务,所以需要安装webpack可执行文件,在为项目添加构建之前,需要新建一个web项目。
-
安装webpack到本项目
//是npm install --save-dev的缩写,安装模块保存到packages.json的devDependencies #npm i -D //安装最新版本的webpack #npm i -D webpack //安装指定版本 #npm i -D webpack@<version> //安装最新的体验版本 #npm i -D webpack@beta
运行方式:在项目根目录对应的命令行里通过
node_modules/./bin/webpack
运行webpack的可执行文件。 -
安装webpack到全局
将webpack安装到全局后,我们可以在任何地方公用一个webpack可执行文件,不需要重复安装
#npm i -g webpack
推荐安装到本项目,可以放置不同的项目因依赖不同版本的webpack而出现冲突。
-
使用webpack
(1)创建项目,相关的目录结构,文件以及内容。需要调整package.json文件,确保安装包是私有的,移除
main
入口。
package.json文件的内容如下:"name": "my-project", "version": "1.0.0", "description": "", "private": true, "scripts": { "build":"webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9" }, "dependencies": {} }
(2)随后可以使用
npm run build
命令进行构建。
webpack是一个打包模块化JavaScript工具,会从入口文件main.js
出发,识别出源码中的模块化导入语句,递归地找出入口文件的所有依赖,将入口和其所有依赖打包到一个单独的文件中。