服务器对大前端扫盲 Vue.js + Element-UI(3)

传统的前端一般会html、javascript、css这三样东西就够了。现代的前端发展迅猛，引入了TypeScript、SCSS、LESS、stylus(CSS预处理器)等技术，提供了更丰富的特性，提高了开发效率，但是引入的这些技术不能直接被浏览器解析，需要一个东西将浏览器不能解析的代码翻译成浏览器可以直接解析代码，这就是webpack的作用。

TypeScript是JavaScript类型的超集(简单的说就是对JavaScript的封装)，提供更加丰富的特性(在JavaScript上添加了可选的静态类型和基于类的面向对象编程)，而且可以编译成纯JavaScript

ECMAScript：ECMAScript是标准，JavaScript是ECMAScript的实现，ECMAScript也在快速发展，引入了更多的语法新特性等。其中ECMAScript6使用较多，现在ECMAScript8已经发布了。

SCSS: SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

less: Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

stylus：文件后缀是. styl 的这个哥们儿学名叫 stylus，是 CSS 的预处理框架。stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(TypeScript、SCSS等)，并将其打包为合适的格式以供浏览器直接使用。随着webpack的发展，webpack支持ECMAScript6、ECMAScript7、ECMAScript8等。随着webpack的发展，webpack不仅仅用来编译(翻译)代码，也集成了更多的功能，比如：

热加载：修改了代码然后保存，浏览器会自动刷新

压缩文件：压缩图片，字体, 脚本文件等

插件(plugin)：webpack打包时可以执行某个插件，控制webpack打包时的某个过程，这种插件机制和maven中的插件原理完全一样

webpack最终发展成为：前端项目的构建工具。

模块(module)化就是把复杂的应用程序细分为较小的文件，在webpack中一切都是模块，js、css、图片、字体等待都可称为模块。

webpack文档

2. webpack安装

webpack可以通过npm安装,安装后会生成一个node_modules目录

# npm初始化,直接回车即可，生成package.json文件 

npm init 

# npm全局(global)安装 

npm install -g webpack  

# 切换到项目根目录，安装到你的项目目录中, 生成node_modules目录和package-lock.json文件 

# 注意：全局安装的作用是可以在命令行中直接使用命令，效果类似于环境变量的作用 

# 全局安装后，仍然需要在自己的项目中再次安装 

# --save-dev 将依赖保存到package.json中的devDependencies中 

# --save 将依赖保存到package.json中的dependencies中 

npm install --save-dev webpack 

3. webpack中的重要功能

3.1 devtool

（编辑：ASP站长网）