現(xiàn)階段前端打包工具很多，目前常用的是webpack，grunt等扯躺，在沒出現(xiàn)更好的工具之前，學(xué)好這兩個(gè)其中的一個(gè)基本都?jí)蛴昧诵В壳白盍餍械倪€屬webpack录语，也是很多面試官喜歡問的話題，這篇文章從零了解打包機(jī)制难衰，只要你有耐心保證你會(huì)有收獲钦无。
安裝webpack和webpack-cli依賴
首先，還是需要初始化項(xiàng)目（npm init）盖袭，這里安裝的依賴建議是本地依賴而不是全局依賴失暂，如果安裝本地依賴又安裝全局依賴容易把人搞混，但是本地依賴不能使用webpack命令鳄虱，只能根據(jù)配置項(xiàng)來執(zhí)行弟塞。（npm install --save-dev webpack webpack-cli）
配置package.json打包項(xiàng)
{
......
"scripts": {
"build": "webpack --config webpack.prod.js"
}
......
}
新建webpack.prod.js文件并進(jìn)行配置
在當(dāng)前目錄建立index.html，在src目錄下建立main.js拙已，這里的webpack配置運(yùn)行的環(huán)境是node决记，我們就可以使用common規(guī)范進(jìn)行編碼，entry（打包入口）output（打包出口倍踪，配置打包出口路徑和名字）系宫。這里使用了path.resolve進(jìn)行憑借，原因是window和linus解析路徑"/"不一樣建车，這里做兼容處理扩借。
const path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
}
};
配置html-webpack-plugin插件自動(dòng)生成index.html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
})
]
};
配置clean-webpack-plugin打包前先清除原有文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
};
在main.js配置vue3入口
這里使用的是vue3語法，還需要引用vue（npm install --save-dev vue）
import {createApp} from 'vue';
import App from './App.vue';
createApp(App).mount("#app");
在src目錄下建立App.vue根組件
<template>
<div class="tree">
<img src="../static/tree.png" />
<div>樹木圖片-{{prive}}</div>
</div>
</template>
<script>
import { ref } from 'vue';
import server from '../config/server.ts';
export default {
setup(){
let prive = ref(123);
server({
url:"/zhuyangmsg/add",
method: "post",
data: {a:1,b:2}
})
return {
prive
}
}
}
</script>
<style>
.tree{
width:800px;
margin: 0 auto;
}
.tree>img{
width: 100%;
height:500px;
}
</style>
使用vue-loader編譯vue文件
下載依賴（npm install --save-dev vue-loader）
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' }
]
},
plugins: [
new VueLoaderPlugin()
]
};
使用babel-loader編譯js文件
下載依賴（npm install --save-dev babel-loader @babel/core @babel/preset-env）
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ["@babel/env"]
}
}]
}
]
}
};
使用ts-loader編譯ts文件
在項(xiàng)目根路徑創(chuàng)建tsconfig.json文件缤至，下載依賴（npm install --save-dev ts-loader）
module.exports = {
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
使用css-loader編譯css文件
這里use依賴是從后往前執(zhí)行潮罪，順序不能反，先嵌入css文件在把css文件加載到style標(biāo)簽中领斥，下載依賴（npm install --save-dev style-loader css-loader）
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
使用url-loader編譯image文件
下載依賴（npm install --save-dev url-loader file-loader）
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'static/',
limit: 10 * 1024
}
}
}
]
}
};
區(qū)分打包環(huán)境
項(xiàng)目根目錄創(chuàng)建webpack.common.js嫉到、webpack.prod.js、webpack.dev.js三個(gè)文件月洛，通過webpack-merge提取出公用配置（npm install --save-dev webpack-merge）何恶。注意：devtool配置會(huì)新建map文件，作用是打包后的文件和開發(fā)文件建立映射關(guān)系嚼黔，方便定位問題导而。
webpack.prod.js
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common.js");
module.exports = merge(commonConfig,{
mode: 'production'
});
webpack.dev.js
const path = require("path");
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common.js");
const devConfig = {
mode:'development',
devtool:'cheap-module-source-map',
//webpack-dev-server配置本地服務(wù)器忱叭，并配置跨域
devServer:{
static: path.join(__dirname, "dist"),
port: 8000, // 本地服務(wù)器端口號(hào)
hot: true, // 熱重載
proxy: {
'/api/*': {
target: 'http://localhost:3333', // 目標(biāo)服務(wù)器地址
secure: false, // 目標(biāo)服務(wù)器地址是否是安全協(xié)議
changeOrigin: true, // 是否修改來源, 為true時(shí)會(huì)讓目標(biāo)服務(wù)器以為是webpack-dev-server發(fā)出的請(qǐng)求!
}
}
}
}
module.exports = merge(commonConfig,devConfig);
使用cross-env區(qū)分打包環(huán)境
下載依賴（npm install --save-dev cross-env）
{
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js",
"dev": "cross-env NODE_ENV=development webpack --config webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.prod.js"
}
封裝axios區(qū)分服務(wù)
項(xiàng)目根目錄建config目錄建立server.ts封裝公用的axios調(diào)用接口，通過process.env.NODE_ENV區(qū)分使用的服務(wù)今艺。
import axios from 'axios';
let baseUrl:string = ""
if(process.env.NODE_ENV == "development"){
baseUrl = "http://development.com"
}else if(process.env.NODE_ENV == "production"){
baseUrl = "http://production.com"
}
console.log(baseUrl)
const server = axios.create({
baseURL: baseUrl,
timeout: 10000
})
server.interceptors.request.use(config => {
console.log("請(qǐng)求攔截");
return config;
})
server.interceptors.response.use(response => {
console.log("響應(yīng)攔截");
return response.data;
})
export default server;
