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’})
]