12-vue生态圈_webpack

HTML
CSS
JS
JQ
项目(看点资讯)
htmlAPI
ES6

VUE
VUEX
状态管理机

axios
mvvm:
轻量级

ajax
mvc
jq
1.创建
let xml = new XMLHttpRequest()
2.打开链接
xml.open()
3.设置请求头
4.发送请求
5.监听响应

$.post()
$.get()
$.patch()
$.put()
$.delete()

vue生态
webpack
sass
框架

vue项目

小程序

nodeJS

---

webpack
静态模块打包工具
它会把浏览器识别不了的拓展语言,转换成能够识别的语言(sass,ts)

打包
loader
插件
模块

区别:
Gulp/Grunt:优化前端开发流程的
webpack:模块化的解决方案,Gulp/Grunt能做的事情,webpack同样能做到
处理速度更快,能够打包更多类型的文件

node升级
下载高版本的node
安装的时候把安装路径选择和之前的安装路径一样,高版本会覆盖低版本

安装webpack
npm install -g webpack 全局安装 (在开发过程中,打包后,都需要的组件)

npm install --save-dev webpack 局部安装 (只在开发过程中需要,打包后不需要)

webpack脚手架
npm install -g webpack-cli

查看安装版本
webpack -v

npm init
npm init -y(默认)

webpack本身只能处理js文件

loader可以将所有类型的文件,转换成webpack可以处理的文件
use 转换时使用哪个loader
test 转换的是哪一个或者哪些文件

css文件
css-loader
加载css文件
npm install --save-dev css-loader

style-loader
将css文件作用于代码中
npm install --save-dev style-loader

注意:webpack在读取使用的loader时,是按照从右到左的一个顺序

module: {
rules: [
{
test: /.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
],
},

文件上传
base64编码格式上传

文件服务器
接口 文件服务器

文件流 表单(enctype=‘mutiple/form-data’)

vue init webpack app01

plugin
插件
对webpack现有的功能进行扩展

html-webpack-plugin
BannerPlugin

plugins: [
new webpack.BannerPlugin(‘最终版权归xxx所有’),
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]