Babel
JavaScript编译器，从项目根目录下的. babelrc中读取配置
下载插件以及对应依赖模块，一个plugin接入，preset列出使用的新语法
例子：
ES6的class用ES5的prototype实现
为新的API注入polyfill，例如fetch API
typescript
全局安装typescript 之后，携带安装编译器tsc
tsc h.ts命令编译出. js文件和js.map文件
tsconfig. json
集成到webpack（方法之一）
loader（module）
extensions增加ts后缀
源码转换有文件合并的过程，所有内部变量都改了名字=>js.map文件记录位置信息，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
scss
Scss 是 Sass 3 引入新的语法，Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
#sidebar
width: 30%
background-color: #faa
#sidebar {width: 30%; background-color: #faa}
scss语法类似css, sass语法类似ruby
scss官方提供了多种编译器，将其编译成在浏览器环境下运行的css,例如node-sass
C++编写，再用node封装
集成到webpack（方法之一）
sass-loader（module）和css-loader（导入语句，CSS module,压缩css）和style-loader（JavaScript注入样式）
postCSS
postCSS css处理工具, JavaScript编写，运行在node上，配置文件postcss.config.js。
可以通过插件机制扩展自己的功能，更灵活
自动添加前缀，适配各浏览器
使用下一代css语法
集成到webpack（方法之一）postcss-loader
React
Babel和Typescript都提供了支持
Babel导入React
1、两者都需要先安装react、react-dom
Babel原生不支持JSX语法，还需要安装新的依赖babel-preset-react
修改. babelrc，加入
"presets": ["@babel/preset-react"]
然后就可以使用了
import * as React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
class Button extends Component {
render(){
return <h1>hello</h1>
}
render(<Button/>,window.document.getElementById('app'));
}
Typescrip导入React
1、两者都需要先安装react、react-dom
Typescrip原生支持JSX语法，不需要安装新的依赖，只需要在tsconfig.json中添加
{
‘compilerOptions’ :{
'jsx':'react'
}
}
使用了jsx语法的文件后缀必须是tsx
webpack.config.js
resolve: {
extensions: [ '.ts','.tsx','.js' ]
}
vue
Babel导入vue
vue一般通过babel集成
vue-loader:解析 .vue文件，提取出其中的逻辑代码script、style、template并把他们交给对应的loader
css-loader、vue-template-compiler
使用typescript编写vue
vue从2.5.0版本开始就提供了对typescript的良好支持
为单页应用生成HTML
只输出了一个 bundle.js 文件，所以可以通过模板文件生成
模板文件语法
模板文件：描述哪些资源需要以某种方式加入到输出的HTML文件中
.tpl文件，实质是一个函数
//变量使用
{$foo={counter}+3} // 标签内的标签
//注释
{* 我是一个Smarty的注释, 显示输出时我不会存在 *}
//函数使用
{include file="header.tpl"}
EJS是一个简单高效的js模板，用来生成html标签。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装
EJS常用标签
<% %>流程控制标签
<%= %>输出标签（原文输出HTML标签）
<%- %>输出标签（HTML会被浏览器解析）
<%# %>注释标签
% 对标记进行转义
<link rel='stylesheet' href='app?_inline'>
url字符串可以分为两部分，例如：
app?_inline
前面的app表示CSS代码来自名叫app的chunk
后面的 inline表示这些代码需要被内嵌到这个标签所在的位置
除了_inline还支持
_dist 只有生产环境下引入该资源
_dev 只有开发环境下引入该资源
_ie 只有ie浏览器下引入该资源
配置模板文件
webpack.config.js
plugins:[
// 一个webPlugin对应一个HTML文件
new WebPlugin({
template:'HTML模板文件所在路径',
filename:'index.html' // 输出HTML的文件名称
}),
new ExtractTextPlugin({
filename:`[name]_[coontenthash:8].css`, // 为输出的CSS文件名称加入Hash值
}),
// 定义环境变量
new DefinePlugin({
'process.env':{
// NODE_ENV定义为production，以去除源码中只有开发时才需要的部分
NODE_ENV:JSON.stringify('production')
}
}),
// 压缩代码输出
new UglifyJsPlugin({
// 最近凑的输出
beautify: false,
// 删除注释
comments: false,
// 具体压缩操作的配置
compress: {
warnings：false, // 删除没有用到的代码时候不输出警告
drop_console: true, // 删除所有‘console’语句，可以兼容IE浏览器
collapse_vars: true, // 内嵌已定义但是只用到一次的变量
reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
}
})
]
补充：webpack切换开发环境、生产环境
开发环境和生产环境的区别是调用的接口地址、资源存放地址、线上的资源是否需要压缩等方面
在package.json中设置一个node的全局变量，然后在webpack.config.js中进行生产环境和开发环境的配置切换
管理多页应用
按照之前单页的生成方法，出现多页的时候。每增加一页就需要配置一个new WebPlugin实例，同时将页面对应的入口加入entry配置项中
解决方法之一：
web-webpack-plugin插件的功能：
WebPlugin为单个应用生成HTML
AutoWebPlugin管理多个单页应用，可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个WebPlugin输出对应的 html。
AutoWebPlugin支持所有WebPlugin支持的功能
AutoWebPlugin来解决问题，AutoWebPlugin强制规定了项目部分的代码结构
将所有单页应用的代码都放到一个目录pages下
一个单页应用对应一个文件夹，且每个文件夹都有一个index.js作为入口执行文件
然后修改webpack配置文件
webpack.config.js
const path = require('path');
const { AutoWebPlugin } = require('web-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 使用AutoWebPlugin自动寻找pages目录下的所有目录，将每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin('pages', {
template: './template.html', // HTML模板文件所在的文件路径
postEntrys:['./common.css'],// 所有的页面都依赖的共用的css样式文件
// 提取所有页面的公共代码
commonsChunk: {
name: 'common'// 提取出公共代码的Chunk名称
}
});
module.exports = {
// AutoWebPlugin会为寻找到的所有单页应用生成对应的入口配置
// autoWebPlugin.entry方法可以获取所有由autoWebPlugin生成的入口配置
entry: autoWebPlugin.entry({
// 这里加入 我们额外需要的chunk入口
}),
output:{
filename: '[name]_[chunkhash:8].js',
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.js$/,
use:['babel-loader'],
exclude: path.resolve(__dirname, 'node_modules'),
},
{
test: /\.css/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
autoWebPlugin,
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
]
}
autoWebPlugin回味每个单页应用生成一个chunk配置和WebPlugin配置
