webpack和gulp區(qū)別
1.gulp是工具鏈、構(gòu)建工具冰单』戏欤可以配合各種插件做jps.壓縮，css.壓縮诫欠，less編譯等涵卵，可以替代手工實(shí)現(xiàn)自動(dòng)化工作浴栽。
2.而webpack是文件打包工具，可以把項(xiàng)目的各種jps.文轿偎、css.文件等打包合并成一個(gè)或多個(gè)文件典鸡，主要用于模塊化方案，預(yù)編譯模塊的方案坏晦。
3.在定義和使用類(lèi)比中兩者都有各的用途椿每，同時(shí)webpack為初級(jí)編譯程序，gulp為高級(jí)編譯程序英遭，在功能上要比webpack應(yīng)用程序中多间护。
4.webpack可以很方便使用node_module、es6或者樣式注入等功能挖诸，作為最初級(jí)的功能定位性價(jià)比最高汁尺，webpack輸入輸出都以js為主，對(duì)html兼顧較少多律，可用組件不多很難達(dá)到可用的程度痴突。
5.gulp在編程方面較為復(fù)雜，但是可用的組件也會(huì)更多狼荞，手動(dòng)編譯的情況下耗時(shí)較長(zhǎng)辽装，同時(shí)此軟件不適合初級(jí)入門(mén)者使用。
常見(jiàn)的模塊化開(kāi)發(fā)
由于各個(gè)板塊之間需要傳遞數(shù)據(jù)相味，一般做法是封裝成匿名函數(shù)拾积，但是外不下更要再訪問(wèn)其他板塊的函數(shù)就很難了，然后就有了第二種做法丰涉，聲明一個(gè)對(duì)象拓巧，然后再對(duì)其添加內(nèi)容，再對(duì)其進(jìn)行導(dǎo)出
- CommonJS（node）
- AMD
- CMD
- ES6的Modules
跨域報(bào)錯(cuò)
- 報(bào)錯(cuò)原因： A 網(wǎng)站的 javascript 代碼試圖訪問(wèn) B 網(wǎng)站,包括提交內(nèi)容和獲取內(nèi)容一死。由于安全原因,跨域訪問(wèn)是被各大瀏覽器所默認(rèn)禁止的肛度。
-
解決方案
解決方案一.： 在VScode里面安裝插件 live server，右擊 -> open with live server
解決方案二： 自己建立一個(gè)http服務(wù)
image.png
重點(diǎn)是ES6的模塊化操作
export是導(dǎo)出操作
- 導(dǎo)出方式一
//導(dǎo)出方式一
export var a = 111;
export var sum = 222;
- 導(dǎo)出方式二
//導(dǎo)出方式二
var a = 111;
var sum = 222;
export { a, sum }
-
導(dǎo)出方式三（某些情況下投慈，一個(gè)模塊中包含某個(gè)的功能承耿，我們并不希望給這個(gè)功能命名，而且讓導(dǎo)入者可以自己來(lái)命名）
image.png
導(dǎo)入
import { a, sum } from './aaa.js'
console.log(a, sum);
- 導(dǎo)出函數(shù)
//導(dǎo)出函數(shù)
export function fn(text) {
console.log(text);
}
導(dǎo)入函數(shù)
import { fn } from './aaa.js'
fn('你好啊')
- 導(dǎo)出類(lèi)
//導(dǎo)出類(lèi)
export class persion {
constructor(name, age) {
this.name = name
this.age = age
}
run() {
console.log(this.name + '在奔跑');
}
}
導(dǎo)入
import { persion } from './aaa.js'
var student = new persion()
student.name = '郭群博'
student.age = 18
student.run()
webpack
- 是一個(gè)靜態(tài)模塊化打包工具伪煤，讓我們可能進(jìn)行模塊化開(kāi)發(fā)加袋，并且會(huì)幫助我們處理模塊間的依賴關(guān)系
打包：比如壓縮圖片，將scss轉(zhuǎn)成css带族，將ES6語(yǔ)法轉(zhuǎn)成ES5語(yǔ)法锁荔，將TypeScript轉(zhuǎn)成JavaScript等等操作 - 終端輸入：
webpack ./src/main.js ./dist/bundle.js（webpack 入口文件 打包到的文件）
每改變一次就要重新打包蟀给，模塊化思想可以混合使用
webpack的配置
- 配置
webpack.config.js文件
const path = require('path') //引入path包（需要下載）
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'), //這個(gè)路徑必須是動(dòng)態(tài)的
filename: 'bundle.js'
},
}
然后在終端輸入webpack就能打包啦
-
凡是在終端里面輸入webpack的蝙砌，都時(shí)用的全局webpack阳堕，配置下圖之后，終端輸入
npm run build之后會(huì)按照 先局部后全局的順序 進(jìn)行打包
image.png -
下載局部webpack
npm install webpack@3.6.0 -save-dev
image.png
webpack中使用css文件的處理
- 配置
webpack.config.js文件
const path = require('path') //引入path包（需要下載）
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'), //這個(gè)路徑必須是動(dòng)態(tài)的
filename: 'bundle.js'
},
module: {
rules: [{
//正則表達(dá)式
test: /\.css$/i,
//css loader只負(fù)責(zé)加載
//當(dāng)有多個(gè)loader的時(shí)候择克，會(huì)從右往左執(zhí)行
use: ['style-loader', 'css-loader']
}, ]
},
}
- 遇見(jiàn)bug并解決
image.png
報(bào)錯(cuò)原因：css-loader和style-loader的版本過(guò)高
解決方法：
-
修改package.json里的版本信息
image.png - 終端輸入命令
npm install然后再輸入npm dev - 重新進(jìn)行打包即可
報(bào)錯(cuò)解決
less-loader的使用以及配置
- 下載對(duì)應(yīng)的包
npm install less less-loader --save-dev -
配置package.json文件
image.png
圖片文件處 方法一：file-loader,方法二：url-loader（和file-loader類(lèi)似恬总，只是選擇性的將圖片進(jìn)行64base編碼）
-
npm install --save-dev url-loader@1.1.2
當(dāng)圖片的大小小于limit的時(shí)候，他會(huì)通過(guò)base64編碼肚邢，這也是limit的作用 -
npm install --save-dev file-loader@3.0.1
當(dāng)圖片大于limit的時(shí)候壹堰，會(huì)采用32位的哈希值命名圖片， -
讓圖片打包后的名字與打包前的名字相同的配置
image.png - 我們整個(gè)程序是打包在dist文件夾下的骡湖，所以這里我們需要在路徑下再添加一個(gè)dist/
image.png
loader以及圖片名操作配置：
{
test: /\.(png|jpg|gif|jpeg)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192,
//自動(dòng)在打包之后的文件夾下面建立一個(gè)image文件夾贱纠，并往里面打包圖片
name: 'image/[name].[hash:8].[ext]'
}
}
}
webpack5之后就支持asset module type（無(wú)需下載）,使用方法：
webpack插件plugin
- npm下載
- 導(dǎo)入配置文件：
const { CleanWebpackPlugin } = require("clean-webpack-plugin") - 配置（和module在同一級(jí)）
//每次打包前會(huì)刪除前一次打包的文件
plugins: [
new CleanWebpackPlugin()
]
方便調(diào)試的設(shè)置
module.exports = {
//設(shè)置模式
//development 開(kāi)發(fā)階段使用
//production 準(zhǔn)備上市時(shí)使用
mode: "development",
//設(shè)置source-map，簡(jiǎn)歷打包之后的js文件的映射文件响蕴，方便調(diào)試代碼錯(cuò)誤的地方
devtool: "source-map",
es6轉(zhuǎn)化成es5
babel作用谆焊，babel編譯器將我們的源代碼，轉(zhuǎn)換成瀏覽器可以直接識(shí)別的另一段源代碼----解析-轉(zhuǎn)換-生成
方法一
-
npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
配置webpack.config.json文件
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
方法二：
*無(wú)需配置webpack
npm install @babel/core @babel/cli -D- 安裝插件：
npm install @babel/plugin-transform-block-scoping -D - 插件：
npm install @babel/plugin-transform-arrow-functions -D - 打包：
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
方法三
- 由于配置過(guò)于麻煩浦夷，所以有了預(yù)設(shè)這一說(shuō)
- 下載：
npm install @babel/preset-env -D npx babel demo.js --out-file test.js --presets=@babel/preset-env
vue版本報(bào)錯(cuò)
-
原因
image.png -
解決方案
配置webpack.config.js文件
image.png
el和template
-
如果el和template都存在的話辖试，template會(huì)將el替換掉
image.png - vscode中建立一個(gè).vue的文件，代碼不高亮劈狐，安裝插件：vetur（要安裝 0.31.1之前的）詳細(xì)原因：https://blog.csdn.net/jsjcmq/article/details/110926639
vue-loader
- 下載
npm install vue-loader vue-template-compiler --save-dev -
修改版本image.png
- 更新第三方包
npm install - 配置webpack.config.js文件
//配置vue-loader
{
test: /\.vue$/,
use: ['vue-loader']
}
- 完成
Vue3的 .Vue文件打包
-
新建Vue文件罐孝，并將邏輯的部分進(jìn)行導(dǎo)出
image.png -
導(dǎo)入
image.png - 配置
npm install vue-loader@next -D
處理template
npm install @vue/compiler-sfc -D
{
test: /\.vue$/,
loader: "vue-loader"
}
加載插件
使用插件
關(guān)于import導(dǎo)入文件名后綴省略的問(wèn)題
- 在webpackage.config.js文件中的
resolve屬性配置
image.png
關(guān)于webpack配置plugins
-
引入和配置（不用下載）
image.png
將文件index.html打包到dist文件夾下
- 安裝HtmlWebpackPlugin插件
npm install html-webpack-plugin@3.2.0 --save-dev -
配置webpack.config.js文件
image.png
plugins: [new webpack.BannerPlugin('最終版權(quán)歸Coderg所有'),
new HtmlWebpackPlugin({
//將index.html文件作為模板，在此之前別忘把index.html文件中的script引入刪除
//將output屬性中的publicPath給注釋掉
template: 'index.html'
})
]
-
將output屬性中的publicPath給注釋掉
image.png
將bundle.js代碼壓縮（丑化）
下載插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev-
配置webpack.config.js
image.png -
結(jié)果（所有注釋都會(huì)消除）
image.png
webpack watch的配置問(wèn)題
- 在修改文件內(nèi)容之后肥缔，live server之后莲兢，可以實(shí)時(shí)更新修改之后的內(nèi)容
-
方法一：在package的scripts添加
image.png -
方法二：在webpack配置文件中添加屬性
image.png
服務(wù)器的搭建
webpack提供了一個(gè)可選的本地開(kāi)發(fā)服務(wù)器，基于Node.js的express框架续膳，可以讓瀏覽器自動(dòng)刷新怒见，顯示我們修改之后的結(jié)果
- 需要一個(gè)獨(dú)立板塊
- 下載對(duì)應(yīng)板塊
npm install --save-dev webpack-dev-server@2.9.1 -
配置 package.json文件中的script
image.png -
在3.11.2版本的配置方法
image.png - 在終端輸入
npm install dev,之后復(fù)制地址即可訪問(wèn)
image.png -
配置webpack.config.js文件
image.png
devServer: {
//規(guī)定服務(wù)器服務(wù)哪一個(gè)文件夾,默認(rèn)是根文件夾，我們這里要填寫(xiě)./dist
contentBase: './dist',
//是否要實(shí)時(shí)輸出
inline: true,
// port: 6666
/* inline：頁(yè)面實(shí)時(shí)刷新
historyApiFallback：在SPA頁(yè)面中姑宽，依賴HTML5的history模式
*/
}
- 加上--open之后再npm install dev就會(huì)自動(dòng)打開(kāi)網(wǎng)頁(yè)
"dev": "webpack-dev-server --open"
熱替換
-
熱替換：因?yàn)槊恳淮卧谛薷纳倭看a之后瀏覽器都會(huì)刷新整個(gè)頁(yè)面遣耍，所以通過(guò)熱替換之后只會(huì)刷新修改之后的內(nèi)容
image.png
跨域訪問(wèn)之a(chǎn)xios
-
原理：在中間加了另外一個(gè)服務(wù)器，起到代理的作用
image.png
區(qū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境
- 生產(chǎn)環(huán)境（production）
-
開(kāi)發(fā)環(huán)境（development）
步驟：1. 新建文件夾
image.png
- 將開(kāi)發(fā)環(huán)境依賴和生產(chǎn)環(huán)境依賴抽離出來(lái)放在對(duì)應(yīng)文件下
- 下載第三包
webpack-merge@4.1.5 --save-dev炮车，分別在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置文件引入并配置
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {環(huán)境配置})
4.修改公共配置打包文件位置
-
配置package.json文件的腳本
image.png -
npm run bulid----npm run dev
