* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 四个核心概念
* Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
* Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
* Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
* Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
* 理解Plugins
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成HTML文件并
* UglifyJSPlugin: 压缩js文件
* 配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
{
"name": "webpack_test",
"version": "1.0.0"
}
* 创建第二个js: src/js/math.js
```
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
```
* 创建json文件: src/json/data.json
```
{
"name": "Tom",
"age": 12
}
```
* 更新入口js : entry.js
```
import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')
```
* 编译js:
```
webpack src/js/entry.js dist/bundle.js
```
* 查看页面效果
* 创建webpack.config.js
```
const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
```
* 配置npm命令: package.json
```
"scripts": {
"build": "webpack"
},
```
* 打包应用
```
npm run build
``` ### 7、打包css和图片文件 * 安装样式的loader
```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
``` * 配置loader
```
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/', //决定输出文件的位置
publicPath: '../images/',
limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理
}
}
]
}
]
}
``` * 向应用中添加2张图片:
* 小图: img/logo.png
* 大图: img/big.jpg
body {
background: url('../img/logo.jpg')
}
添加css样式
#box1{
width: 300px;
height: 300px;
background-image: url("../image/logo.jpg");
}
#box2{
width: 300px;
height: 300px;
background-image: url("../image/big.jpg");
}
index.html添加元素
<div id="box1"></div>
<div id="box2"></div>
npm run build
将style样式改为link标签引入css
将html文件也打包过去
* 安装插件
npm install --save-dev clean-webpack-plugin
* 引入插件（插件都需要引入）
const CleanWebpackPlugin = require('clean-webpack-plugin')
* 配置Plugins
new HtmlWebpackPlugin({ //html加载
filename: 'index.html',
template: 'src/index.html',
})
打包时将之前的文件夹清空，防止之前的文件干扰
* 安装插件
npm install --save-dev html-webpack-plugin
* 引入插件（插件都需要引入）
const HtmlWebpackPlugin = require('html-webpack-plugin');
* 配置Plugins
new CleanWebpackPlugin('build', {
root: path.resolve(__dirname, '../')
}) >以上就是build环境下的设置，可以生成打包后的文件 >命令配置 "build" : "webpack --config webpack.config.build.js"
* 利用webpack开发服务器工具: webpack-dev-server
* 下载
- npm install --save-dev webpack-dev-server@2 webpack-cli
* webpack配置
devServer:{//配置此静态文件服务器，可以用来预览打包后项目
contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
host: 'localhost', //主机地址
port: 8080, //端口号
open: true //是否自动打开浏览器
}
* 命令配置
- "dev": "webpack-dev-server --config webpack.config.dev.js"
* 编译打包应用并运行
- npm run dev >以上就是dev环境下的设置，可以自动在内存中生成打包后的文件并打开网页检查效果，有热更新功能。
* 下载
npm install --save-dev postcss-loader
* 配置文件
* 文件名： postcss.config.js
* 内容：
module.exports = {
"plugins": {
"autoprefixer": {
"browsers": [
"ie >= 8",
"ff >= 30",
"chrome >= 34",
"safari >= 7",
"opera >= 23"
]
}
}
}
* 修改loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader']
})
}
* 修改loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
minimize: true //css压缩
}
}, 'postcss-loader',]
})
}
* 下载
npm install --save-dev babel-core babel-loader babel-preset-es2015
* 修改loader
{
test: /\.js$/,
exclude: /node_modules/, //忽略文件
loader: 'babel-loader',
query: {
presets: [
require.resolve('babel-preset-es2015')
]
}
}
* 下载
npm install --save-dev uglifyjs-webpack-plugin
* 引入plugins
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
* 配置plugins
new UglifyJsPlugin()
* 修改plugins
new HtmlWebpackPlugin({ //html加载及压缩
filename: 'index.html',
template: './src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true
}
}) >以上就是prod环境下的设置，可以生成打包、压缩、语法转换等的文件 >命令配置 "prod" : "webpack --config webpack.config.prod.js"
push()/pop()/shift()/unshift()
forEach(item => {}): 遍历数组
filter(item => true/false): 遍历过滤返回一个子数组
map(item => newItem): 遍历返回一个对应的新数组
find(item => true/false): 遍历查找满足条件的第一个元素
findIndex(item => true/false): 遍历查找满足条件的第一个元素的下标
reduce((preTotal, item) => newTotal, initTotal): 遍历累计 [1, 3, 2, 7]
cookie由key和value组成的文本小数据
分类: 会话cookie和持久化cookie
由服务器端创建: res.cookie(key, value, {maxAge: 1000})
由浏览器端保存: 浏览器接收到新的cookie会自动保存(内存/文件)
使用: 浏览器发送请求时自动携带对应的cookie, 服务器端通过req读取: req.cookies.key
1). 路由组件和非路由组件
2). 容器组件和UI组件
api ajax请求后台接口
assets 共用资源文件夹
css
imgages
components UI组件
containers 容器组件
redux redux相关
actions.js
action-types.js
reducers.js
store.js
util 工具
index.js 入口
1). 使用谁发请求?
react库本身不可以
axios: 封装的XMLHTTPRequest, promise风格, 浏览器端和node服务器端
fetch: 较新的浏览器提供的新的ajax请求方式, 可以引入fetch.js来实现兼容处理
2). 在哪执行?
初始显示: componentDidMount()
交互: 事件回调函数/componentWillReceiveProps()
1)什么是路由?
a.一个路由就是一个映射关系(key:value)
b.key为路由路径, value可能是function/component
2)路由分类
a.后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
b.前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
1). query参数
路由的path: /xxx
请求的路径: /xxx?name=tom&age=18
?后面的部分就是query参数: name=tom, age=18
2). param参数
路由的path: /xxx/:name/:age
请求的路径: /xxx/jack/18
param参数: name=jack, age=18
params.name, params.age # 8. 事件
1). 类型
原生DOM事件
自定义事件
2). 绑定事件监听
事件名/类型
事件回调函数: 接收数据并处理
3). 触发事件
事件名
数据
1). 方式一: 通过props传递
通过props可以传递一般数据和函数数据,
一般数据-->父组件向子组件
函数数据-->子组件向父组件通信
缺点: 只能一层一层传递/兄弟组件必须借助父组件
2). 方式二: 使用消息订阅(subscribe)-发布(publish)机制
实现库: PubSubJS
组件A: 发布消息(相当于触发事件)
组件B: 订阅消息, 接收消息, 处理消息(相当于绑定事件监听)
优点: 对组件关系没有限制
vue 特点
1.遵循MVVM模式
2.编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
3.它本身只关注UI, 可以轻松引入vue插件或其它第三库开发项目
1)数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2)vue数据代理: 通过vm对象来代理data对象中所有属性的操作
3)好处: 更方便的操作data中的数据
4)基本实现流程
a.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符
b.所有添加的属性都包含getter/setter
c.getter/setter内部去操作data中对应的属性数据