webpack进阶之路一、(介绍到安装及简单使用)

一、为什么要用webpack?

1. 模块化开发

指将一个复杂的系统分解为多个模块以方便开发和修改。
好处有:

  1. 避免变量污染,命名冲突
  2. 提高代码复用率
  3. 提高维护性
  4. 依赖关系的管理

2. 模块化开发规范介绍

CommonJS、AMD、ES6等
CommonJS(CommonJS官网)的核心思想是通过require方法来同步加载依赖的其它模块,通过module.exports导出需要暴露的接口。例如:

// 导入
const moduleA = require('./moduleA');
// 导出
module.exports = moduleA.func;

优点:

node.js环境下可以使用
具有模块化开发的强大封装功能
npm上发布的很多包采用CommonJS规范

缺点:

无法直接在浏览器环境下运行(需要转化成ES5)
没有模块系统

ES6模块化是国际标准化组织ECMA提出的js模块化规范,目前主流的模块化规范,浏览器和服务器通用的模块解决方案。
es6的代码:

// 导入
import { readFile } from 'fs';
import Vue from 'vue'
// 导出
export function test() {};
export default {
};

目前有些版本的浏览器依旧不兼容es6,所以一般还是通过工具转化成标准的es5。

ECMAScript6.0是JavaScript语言下一代标准。它在语言层面为JavaScript引入了很多新语法和API,例如:

规范模块化
Class语法
用let声明代码块内有效的变量,用const声明常量
箭头函数
async函数
Set和Map数据结构。

具体可以参考(es6的一些新特性):https://blog.csdn.net/qq_33599109/article/details/83313127

构建工具
各种可以提高开发效率的新思想和框架层出不穷,但他们都有一个共同点:源码无法直接运行,必须通过转换后才可以正常运行。所谓的构建就是做这样的事情,将源代码转换为可执行的JavaScript、CSS、HTML代码。

  • 代码转换:将TypeScript编译成JavaScript、将SCSS、LESS编译成CSS等。
  • 文件优化:压缩JavaScript、CSS、HTML代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码,提取首屏不需要执行的部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。
    构建体现的前端思想是:工程化、自动化,通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作能力以及开发体验。

3. 为什么选择webpack?

webpack是一个打包模块化JavaScript的工具,在webpack里一切文件皆模块,通过Loader转换文件,通过Plugin注入钩子,最后输出由多个模块组合成的文件
webpack进阶之路一、(介绍到安装及简单使用)_第1张图片
一切文件如JavaScript、CSS、SCSS、图片、模板,对于webpack来说都是一个个模块,这样的好处是能清晰地描述各个模块之间的依赖关系,以方便Webpack对模块进行组合和打包。经过Webpack的处理,最终会输出浏览器能使用的静态资源。
Webpack具有很大的灵活性,能配置处理文件的方式,使用方式如下:

module.exports = {
	// 所有模块的入口,Webpack从入口开始递归解析出所有依赖的模块
	entry: './app.js',
	output: {
		// 将入所依赖的所有模块打包成一个文件bundle.js输出
		filename: 'bundle.js'
	}
}

Webpack的优点是:

  • 专注于处理模块化的项目,能做到开箱即用、一步到位;
  • 可通过Plugin扩展,完整好用又不失灵活;
  • 使用场景不局限于Web开发;
  • 社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源的扩展;
  • 良好的开发体验。
  • 模块化+新语言+新框架

二、安装Webpack

  • 新建一个项目,通过npm init来初始化最简单的采用模块化的开发的项目。
  • # npm i webpack -D (npm install webpack --save-dev)安装最新的稳定版的webpack,指安装并保存到package.json的devDependencies
  • npm i -D webpack@,安装指定版本的webpack。npm i -D webpack@beta 安装最新的体验版本。
  • npm i webpack -g 安装webpack到全局,我们可以在任何地方共用一个Webpack可执行文件,而且不用各个项目重复安装。
    webpack练习一:安装使用webpack
    webpack练习二:使用webpack的Loader机制
    webpack练习三:使用webpack的Plugin

三、使用DevServer

目前,我们已经可以让webpack正常运行起来,我们可能更喜欢使用HTTP服务,监听文件变化自动刷新页面等,此时我们需要使用DevServer,DevServer会启动一个HTTP服务器用于服务网页请求,同时会帮助启动Webpack,并接收Webpack发出的变更信号,通过WebSocket协议 自动刷新网页,做到实时预览。
webpack练习四:使用DevServer

四、概念

  • Entry: 入口,Webpack执行构建的第一步将熊Entry开始,可抽象成输入。
  • Module:模块,在Webpack里一切皆模块,一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
  • Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割。
  • Loader:模块转化器,用于将模块的原内容按照需求转换成新内容。
  • Plugin:扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果或做我们想要的事情。
  • Output:输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。

参考链接:
https://webpack.js.org/
https://www.jianshu.com/p/c979126e68aa
https://segmentfault.com/q/1010000013564212
https://www.cnblogs.com/jice1990/p/5435419.html
参考书籍:《深入浅出Webpack》

作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能感兴趣的:(webpack)