什么是 webpack
是前端的一個(gè)項(xiàng)目構(gòu)建工具，他是基于 Node.js 開發(fā)出來(lái)的一個(gè)前端工具
如何完美實(shí)現(xiàn)上述的兩種解決方案
- 使用 Gulp 基于流的自動(dòng)化構(gòu)建工具种远，小巧靈活扣汪，適合功能點(diǎn)的開發(fā)
- 使用 Webpack 適合與整個(gè)項(xiàng)目的構(gòu)建
webpack 安裝的兩種方式
- 運(yùn)行
npm i webpack -g全局安裝 webpack，這樣就能在全局中使用 webpack 的命令 - 在項(xiàng)目根目錄中運(yùn)行
npm i webpack --save-dev安裝到項(xiàng)目依賴中
配置
1.現(xiàn)在先要裝 JQuery
npm init -y// 用來(lái)初始化生成一個(gè)新的package.json文件勺拣。會(huì)問(wèn)很多配置修改問(wèn)題黔宛，如果不改，一路回車雳殊。-y(yes)表示跳過(guò)提問(wèn)階段-
npm i jquery -s//install命令可以使用不同參數(shù)橘沥，指定所安裝的模塊屬于哪一種性質(zhì)的依賴關(guān)系，即出現(xiàn)在packages.json文件的哪一項(xiàng)當(dāng)中夯秃。-s(-save)模塊名被添加到dependencies2.導(dǎo)包時(shí)候的問(wèn)題
我們不要在<head>標(biāo)簽中導(dǎo)入任何包和CSS座咆，會(huì)拖慢渲染速度，應(yīng)該在main.js當(dāng)中加載 webpack .\src\main.js .\dist\bundle.js:webpack處理main.js生成bundle.js(一個(gè)瀏覽器能夠正常解析執(zhí)行的js文件)
我們?cè)?main.js中import $ from 'jquery';和const = require('jquery')都不行仓洼，所以介陶，現(xiàn)在想要利用webpack解決這個(gè)問(wèn)題：
webpack 能夠做什么事情?
正常的 js 文件不能引用其他的 js 文件
- webpack 能夠處理 JS 文件的互相依賴關(guān)系
- webpack 能夠處理 JS 的兼容問(wèn)題，將高級(jí)的瀏覽器所不能識(shí)別的語(yǔ)法色建，轉(zhuǎn)換為瀏覽器所能識(shí)別的語(yǔ)法
修改代碼 main.js 以后怎么辦哺呜？
重新輸正常代碼打包很麻煩，所以我們配置 webpack 的配置文件：
- 在項(xiàng)目的根目錄創(chuàng)建文件
webpack.config.js - 在該文件中像這樣配置
/* jshint esversion: 6 */
// 這個(gè)配置文件箕戳，其實(shí)就是一個(gè) JS 文件弦牡，通過(guò) Node 中的模塊操作，向外暴露了一個(gè)配置對(duì)象
const path = require("path");
module.exports = {
// 手動(dòng)指定入口和出口
entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪個(gè)文件
output: {
path: path.join(__dirname, "./dist"), // 指定打包好的文件漂羊，輸出到哪個(gè)目錄中
filename: "bundle.js" // 指定輸出的文件名稱
}
};
配置以后
webpack命令發(fā)生了什么驾锰？
- 首先， webpack 發(fā)現(xiàn)我們并沒有指定入口和出口走越，他就會(huì)去項(xiàng)目的根目錄去查找是否有
webpack.config.js配置文件- 當(dāng)找到配置文件后椭豫，解析執(zhí)行該文件，當(dāng)解析執(zhí)行文件后旨指，就得到了配置中所導(dǎo)出的配置對(duì)象后赏酥，就拿到了 配置對(duì)象中指定的入口和出料口，然后進(jìn)行打包構(gòu)建
現(xiàn)在的話每次改動(dòng)后輸入 webpack 即可打包谆构，但是就算這樣每次也都要改裸扶，很麻煩
- 使用
webpack-dev-server這個(gè)工具，來(lái)實(shí)現(xiàn)自動(dòng)打包編譯的功能
- 運(yùn)行
npm i webpack-dev-server -D(模塊名將被添加到devDependencies),安裝這個(gè)工具到項(xiàng)目的本地開發(fā)依賴 - 安裝完畢后搬素，這個(gè)工具的用法和
webpack的使用方法完全一樣 - 由于是在項(xiàng)目中本地安裝的這個(gè)工具呵晨，所以無(wú)法把它當(dāng)做腳本命令在
powershell終端中直接運(yùn)行(只有那些全局安裝的才能在終端中正常執(zhí)行) - 注意
webpack-dev-server如果想要正常運(yùn)行，要求熬尺，在本地項(xiàng)目中摸屠，必須安裝webpack - 注意，即使是全局安裝了
webpack我們也要將它們安裝進(jìn)項(xiàng)目依賴當(dāng)中 - 頁(yè)面中的 (利用
webpack生成的)bundle.js放置在我們的 dist 文件夾中粱哼，但是webpack-dev-server生成的 bundle.js 托管在我們電腦的內(nèi)存中（并沒有存放在實(shí)際的物理磁盤上）季二，所以要注意我們引用的 bundle.js 在項(xiàng)目的根目錄/bundle.js（是找不到的）[ 放在內(nèi)存中比較快嘛 ] - --hot 可以實(shí)現(xiàn)瀏覽器的無(wú)刷新重載，異步刷新
- 即使這樣配置
contentBase指令的過(guò)程也很麻煩，需要指定啟動(dòng)的目錄胯舷，而且還要修改index.html和script標(biāo)簽的src屬性刻蚯，所以推薦使用html-webpack-plugin插件配置啟動(dòng)頁(yè)面
- 運(yùn)行
npm i html-webpack-plugin --save-dev安裝到以來(lái)開發(fā) - 修改 webpack.config.js 配置文件：
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 手動(dòng)指定入口和出口
entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪個(gè)文件
output: {
path: path.join(__dirname, "./dist"), // 指定打包好的文件，輸出到哪個(gè)目錄中
filename: "bundle.js" // 指定輸出的文件名稱
},
plugins: [
// 配置插件的節(jié)點(diǎn)
// 3
new webpack.HotModuleReplacementPlugin(), // new 一個(gè)熱更新的模塊對(duì)象
new htmlWebpackPlugin({
// 創(chuàng)建一個(gè)內(nèi)存中生成 html 的插件
template: path.join(__dirname, "./src/index.html"), //會(huì)根據(jù)指定的模板頁(yè)面桑嘶，生成的內(nèi)存中頁(yè)面’
filename: "index.html"
})
]
};
這個(gè)插件的兩個(gè)功能 1.自動(dòng)在內(nèi)存中模板指定頁(yè)面生成一個(gè)內(nèi)存中的頁(yè)面 2.自動(dòng)把打包好的 bundle.js 追加到頁(yè)面中去
webpack 打包 css 文件
-
webpack只能打包JS類型的文件芦倒，如果想要打包非 JS 類型的文件需要安裝，npm i css-loader style-loader -D - 打開 webpack.config.js 新增一個(gè)配置節(jié)點(diǎn)不翩，叫做 module（一個(gè)對(duì)象），在對(duì)象上麻裳，有個(gè) rules 屬性口蝠，是個(gè)數(shù)組；這個(gè)數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則津坑。
- 如圖
module: {
// 這個(gè)節(jié)點(diǎn)用于配置所有的第三方模塊加載器
// 規(guī)則 --- css
rules: [
// 配置處理 .css 文件的第三方 loader 模塊,調(diào)用順序從右到左
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
];
}
webpack 無(wú)法處理 URL妙蔗，解決方法和上面一樣
注：一些依賴關(guān)系，忘了也沒關(guān)系,這幾個(gè)都是內(nèi)部依賴疆瑰，不需要寫到 webpack.config.js 當(dāng)中
- less-loader ---> less
- url-loader ---> file-loader
- sass-loader ---> node-sass
如何配置使得圖片不會(huì)轉(zhuǎn)成 base64 (為什么眉反？ --> 我在提問(wèn))
在 url-loader 的配置中添加一句
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000'}
limit 給定的值是圖片的大小，單位是比特穆役，如果我們引用的圖片大于或者等于給定 limit 的值就不會(huì)轉(zhuǎn)為 base64 格式的字符串寸五。
Q 為什么圖片的名字會(huì)被改掉
A 防止重名，url 中的 '/' 問(wèn)題
如果就是不想改名字的話
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000&name=[name].[ext]'}
<!-- [name]保持原來(lái)的名字耿币，[ext]保持原來(lái)的格式 -->
但是我也還想要 hash
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000&name=[hash:8]-[name].[ext]'}
Unexpected token / in JSON at position 113 while parsing near
json 文件不能寫注釋
'webpack-dev-server' 不是內(nèi)部或者外部命令梳杏，也不是可運(yùn)行的程序
--> 你沒裝
--> 配置文件明明說(shuō)你裝了 -> -> 我不是，我不是淹接，我沒有十性，就還是沒裝（沒了配置，但是配置文件還有記錄）
解決 webpack 默認(rèn)無(wú)法處理 ES6 新特性 class static
webpack 只能默認(rèn)處理一部分 ES6 的新語(yǔ)法塑悼，一些更加高級(jí)的 ES6 語(yǔ)法或者 ES7 語(yǔ)法劲适， webpack 是處理不了的，這時(shí)候就需要借助第三方的 loader 來(lái)幫助 webpack 處理這些高級(jí)的語(yǔ)法厢蒜，當(dāng)?shù)谌?loader 把高級(jí)語(yǔ)法轉(zhuǎn)為低級(jí)語(yǔ)法以后霞势，會(huì)把結(jié)果交給 webpack 去打包到 bundle.js 中
通過(guò) babel ，可以幫我們將高級(jí)的語(yǔ)法轉(zhuǎn)換為低級(jí)的語(yǔ)法
安裝
我們可以在 webpack 中運(yùn)行如下兩套包斑鸦，全裝 babel 相關(guān)的 loader 功能
npm i babel-core babel-loader babel-plugin-transform-runtime -Dnpm i babel-preset-env babel-preset-stage-0 -D
配置
打開 webpack 的配置文件支示，在 module 節(jié)點(diǎn)下的 rule 數(shù)組中，添加一個(gè)新的匹配規(guī)則：
{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ }
// 配置 babel 的規(guī)則時(shí)鄙才，必須把 node_modules 選項(xiàng)排除掉
// 1.如果不排除的話颂鸿，則 babel 會(huì)把 node_modules 中的所有第三方JS文件都打包翻譯，會(huì)非常消耗 CPU 攒庵，且非常慢
// 2.哪怕硬鋼都轉(zhuǎn)換了嘴纺，項(xiàng)目也無(wú)法正常運(yùn)行
在根目錄地下败晴，新建 .babelrc
新建 .babelrc 的 Babel 配置文件，這是個(gè) JSON 文件（必須符合 JSON 語(yǔ)法）
- 如下配置
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
如何解決 eslint-label 找不到問(wèn)題
將 eslint 和 eslint-label 裝一起：
npm i eslint eslint-label -D
webpack 和 Vue
在 webpack 中安裝 Vue: npm i vue -S
但是這種 Vue 不能支持我們直接像普通網(wǎng)頁(yè)一樣使用
import Vue from "Vue";
在包的查找過(guò)程中：
- 在項(xiàng)目根目錄中有沒有
node_modules的文件夾 - 根據(jù)包名栽渴，找對(duì)應(yīng)的文件夾
- 在
Vue的文件夾中尖坤，找一個(gè)package.json的包配置文件 - 在
package.json文件夾中，查找一個(gè)main屬性 【 main 屬性指定了這個(gè)包在被加載的時(shí)候的入口文件 】-
"main": "dist/vue.runtime.common.js"// 這個(gè)文件暴露一個(gè)實(shí)例供我們使用,是Vue.js的閹割版 - 以往那樣我們用的是
"main": "dist/vue.js"
-
解決方案
- 直接將上述的配置修改成
"main": "dist/vue.js"不大好 import Vue from '../node_modules/vue/dist/vue.js'- 也可以在
webpack.config.js中的添加
// 和 modules 平級(jí)
resolve: {
alias: { // 設(shè)置 vue 被導(dǎo)入包的時(shí)候的配置
'vue$': 'vue/dist/vue.js'
}
},
在 vue 的 runtime-only 中如何渲染一個(gè)組件闲擦？
- 只能夠使用
render函數(shù) - 在
src文件夾底下定義一個(gè)login.vue文件- .vue 文件有三個(gè)部分
templatescriptstyle
- .vue 文件有三個(gè)部分
- 在
main.js中導(dǎo)入login組件import login from './login.vue' -
.vue創(chuàng)造出來(lái)的文件慢味，webpack默認(rèn)不識(shí)別，又要裝第三方loader:npm i vue-loader vue-template-compiler -D- 這里面
vue-loader的版本若為 15 則需要安裝插件VueLoaderPlugin墅冷，不然就不用了纯路。
- 這里面
- 再去
webpack.config.js去配置一下 - 然后在
render調(diào)用寫好的login模板
.vue 文件中的 data 和 method 等屬性
在 ES6 中，也通過(guò)規(guī)范的形式寞忿，規(guī)定了 ES6 中如何導(dǎo)入和導(dǎo)出模塊:
ES6中導(dǎo)入模塊使用import '模塊名稱' from '表示路徑'-
ES6中導(dǎo)出模塊使用export default和export向外暴露成員-
export default暴露出來(lái)的對(duì)象可以用任意對(duì)象名稱接受import hah from '...' - 在一個(gè)模塊中驰唬，一個(gè)
export default只允許暴露一次，而 'export' 可以暴露多次 -
export:export var title = '小星星'腔彰，在一個(gè)模塊中叫编，允許export default和export同時(shí)使用向外暴露成員， -
export接受成員import { title } from '...'霹抛，注意變量名必須要一致搓逾，但是也可以像import { title as title123} from '...'為title起別名。這種形式為【按需導(dǎo)出】杯拐，我們可以拿我們需要的變量
-
export default {
data() {
return {
msg: "123"
}; // 組件中的 data 必須是個(gè) function
},
methods: {
show() {
console.log("調(diào)用了 login.vue 中的 show 方法");
}
}
};
webpack 和 vue-router
- 安裝
npm i vue-router -s -
import VueRouter from 'vue-router';注意要先導(dǎo)入Vue - 手動(dòng)安裝
VueRouter：Vue.use(VueRouter); - 創(chuàng)建路由對(duì)象....
但是我們?nèi)绾物@示組件呢恃逻？
如果像往常一樣將 router-view 和 router-link 寫到 el 所控制的元素中的話，會(huì)被 render 沖掉,所以我們寫到 render 所加載的模板中去
webpack 和 vue 和 css
-
<style scoped>可以在指定作用域 - 普通的 style 標(biāo)簽只支持普通的樣式藕施，如果想要啟用 less 或者 scss 需要設(shè)置 lang 屬性
<style lang="scss" scoped> - 只要 style 標(biāo)簽是在組件中定義的寇损，推薦都為 style 標(biāo)簽開啟 scoped 屬性
最好將路由模塊抽離
初識(shí) Mint-UI
MUI不同于MInt-UI，MUI只是開發(fā)出來(lái)的一套好用的代碼片段裳食，里面提供了配套的樣式矛市、配套的HTML；而Mint-UI诲祸，是真正的組件庫(kù)浊吏，是使用Vue技術(shù)封裝出來(lái)的成套的組件，可以無(wú)縫的和 Vue 項(xiàng)目驚醒集成開發(fā)
因此救氯，MUI和Bootstrap感覺上類似找田，但是Mint-UI只適用于Vue項(xiàng)目
安裝與配置，點(diǎn)擊這里查看文檔
安裝：npm i mint-ui -s
導(dǎo)入所有的 mint-ui 組件
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI);
按需導(dǎo)入
借助 babel-plugin-component着憨，我們可以只引入需要的組件墩衙，以達(dá)到減小項(xiàng)目體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后漆改，將 .babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
// 按需導(dǎo)入 mint-ui 組件
import { Button } from 'mint-ui';
// 使用 Vue.component 注冊(cè)按鈕組件
Vue.component(Button.name, Button);
使用
CSS component 導(dǎo)入后就可以使用
JS component 則是還是需要按需引用
