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

最新推荐文章于 2020-11-30 12:34:19 发布

kuke_kuke

最新推荐文章于 2020-11-30 12:34:19 发布

阅读量248

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_33599109/article/details/83271836

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、为什么要用webpack？

1. 模块化开发

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

避免变量污染，命名冲突
提高代码复用率
提高维护性
依赖关系的管理

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注入钩子，最后输出由多个模块组合成的文件
在这里插入图片描述
一切文件如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@<version>，安装指定版本的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