前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心
背景
大家平時在進行Vue開發的時候,大部分人都是使用 Vue-cli 這個現成的Vue腳手架來進行開發的,但是用它用了這麼久,你難道不想自己搭一個屬於自己的 Vue-cli
嗎?
今天我就帶大家來搭建一個基本的 Vue-cli
,也可以讓大家對 Webpack
有更深入的瞭解!建議大家一定要跟著我一步一步來哦!
事先說明:本文只介紹vue-cli基本配置,關於優化、規範這兩方面,我後面會再寫兩篇文章進行講解
1、建一個資料夾
新建一個資料夾my-vue-cli用來存放專案
2、初始化npm
在終端中輸入
npm init
然後一直回車就行,這樣能使專案擁有一個npm管理環境,之後可以在此環境上安裝我們所需要的包
3、webpack、webpack-cli
安裝 webpack、webpack-cli
webpack
:打包的工具webpack-cli
:為webpack提供命令列的工具npm i webpack webpack-cli -D
4、src、public
在根目錄下新建 src、public
這兩個資料夾,前者用來放置專案主要程式碼,後者用來放專案公用靜態資源
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>my-vue-cli</title> </head> <body> <div id="app"></div> </body> </html>
src/main.js
import { add } from './tools/add.js' console.log(add(1, 2)) console.log('我是main.js')
src/tools/add.js
export const add = (a, b) => { return a + b }
5、入口檔案
剛剛的 main.js
就是我們的入口檔案,也就相當於整個引用樹的根節點,webpack打包需要從入口檔案開始查詢,一直到打包所有引用檔案。
進行入口檔案的配置,在根目錄下新建 webpack.config.js
:
const path = require('path')
module.exports = {
// 模式 開發模式
mode: 'development',
// 入口檔案 main.js
entry: {
main: './src/main.js'
},
// 輸出
output: {
// 輸出到 dist資料夾
path: path.resolve(__dirname, './dist'),
// js檔案下
filename: 'js/chunk-[contenthash].js',
// 每次打包前自動清除舊的dist
clean: true,
}
}
6、配置打包命令
到 package.json
裡配置打包命令:
"scripts": {
"build": "webpack"
},
現在我們到終端輸入 npm run build
,就能發現打包成功:
但是這其實不是我們要的目的,我們的目的是將這個打包後的最終js檔案,插入到剛剛的 index.html
中,因為js檔案得讓html檔案引用,才有意義嘛!所以我們不僅要打包js,還要打包html
小知識:loader和plugin
loader
:使webpack擁有解析非js檔案的能力,如css、png、ts等等plugin
:擴充webpack的打包功能,如優化體積、顯示進度條等等
7、打包html
打包html需要用到 html-webpack-plugin
這個外掛,也就是plugin,所以需要安裝一下:
npm i html-webpack-plugin -D
並且需要在 webpack.config.js
中配置一下
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 剛剛的程式碼...
// 外掛都放 plugins 中
plugins: [
new HtmlWebpackPlugin({
// 選擇模板 public/index.html
template: './public/index.html',
// 打包後的名字
filename: 'index.html',
// js檔案插入 body裡
inject: 'body',
}),
]
}
現在我們可以在終端中執行打包命令 npm run build
可以看到html被打包了,且打包後的html自動引入打包後的js檔案
現在我們可以開啟打包後的 index.html
,發現控制檯可以輸出,說明成功了!
打包CSS
在 src
下新建 styles
資料夾,用來存放樣式檔案檔案
src/styles/index.scss
body { background-color: blue; }
然後我們在入口檔案
main.js
中引入import './styles/index.scss' // 剛剛的程式碼...
我們的目的是,打包
index.scss
這個檔案,並且讓index.html
自動引入打包後的css檔案,所以我們需要安裝以下幾個東西:sass、sass-loader
:可以將scss程式碼轉成csscss-loader
:使webpack具有打包css的能力sass-resources-loader
:可選,支援打包全域性公共scss檔案mini-css-extract-plugin
:可將css程式碼打包成一個單獨的css檔案
我們安裝一下這些外掛
npm i
sass
sass-loader
sass-resources-loader
mini-css-extract-plugin
-D
然後配置一下 webpack.config.js
// 剛才的程式碼...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 剛才的程式碼...
plugins: [
// 剛才的程式碼...
new MiniCssExtractPlugin({
// 將css程式碼輸出到dist/styles資料夾下
filename: 'styles/chunk-[contenthash].css',
ignoreOrder: true,
}),
],
module: {
rules: [
{
// 匹配檔案字尾的規則
test: /\.(css|s[cs]ss)$/,
use: [
// loader執行順序是從右到左
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
// {
// loader: 'sass-resources-loader',
// options: {
// resources: [
// // 放置全域性引入的公共scss檔案
// ],
// },
// },
],
},
]
}
}
此時我們重新執行打包命令 npm run build
,可以發現出現了打包後的css檔案,且 index.html
中自動引入了css檔案:
我們可以看看頁面,可以看到,body的背景已經變成藍色,說明有效果了:
打包圖片
webpack5中已經廢棄了 url-loader
,打包圖片可以使用 asset-module
,我們先放置一張圖片在 src/assets/images
中:
並且改寫一下 index.css
body {
width: 100vw;
height: 100vh;
// 引入背景圖片
background-image: url('../assets/images/guang.png');
background-size: 100% 100%;
}
然後我們在 webpack.config.js
中新增打包圖片的配置
module: {
rules: [
// 剛剛的程式碼...
{
// 匹配檔案字尾的規則
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
// 轉base64的條件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator: {
// 打包到 dist/image 檔案下
filename: 'images/[contenthash][ext][query]',
},
}
]
}
我們現在重新執行一下 npm run build
,發現dist下已經有了 images
這個資料夾
我們看一下頁面背景圖片已經生效,說明打包成功了!
配置babel
babel
可以將我們專案中的高階語法轉化成比較低階的語法,比如可以將 ES6
轉為 ES5
,這樣可以相容一些低版本瀏覽器,所以是很有必要的
首先安裝所需的包:
@babel/core、babel-loader
:轉換語法的工具@babel/preset-env
:轉換的一套現成規則@babel/plugin-transform-runtime
:轉換async/await所需外掛npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -D
由於
babel
是針對js檔案的語法轉換,所以我們需要在webpack.config.js
中去針對js進行操作module: { rules: [ // 剛剛的程式碼... { // 匹配js字尾檔案 test: /\.js$/, // 排除node_modules中的js exclude: /node_modules/, use: [ 'babel-loader' ], } ] }
單單配置了
babel-loader
還是不夠的,我們還需要配置babel
轉換的規則,所以需要在根目錄下建立babel.config.js
// babel.config.js module.exports = { presets: [ // 配置規則 "@babel/preset-env" ], // 配置外掛 plugins: ["@babel/plugin-transform-runtime"] }
此時我們重新執行打包
npm run build
,我們可以發現打包後的js程式碼中,已經把剛剛程式碼中的ES6
語法轉成ES5
語法了!可以看到剛剛程式碼中的const
已經轉成ES5
語法了
打包Vue
打包Vue需要用到以下幾個包:
vue
:Vue開發所需的依賴vue-loader
:解析.vue
檔案的loadervue-template-compiler
:解析vue中模板的工具@vue/babel-preset-jsx
:支援解析vue中的jsx語法
注意:vue
和vue-template-compiler
版本需要一致,這裡我使用2.6.14
這個版本,vue-loader
這裡我使用了15.9.8
這個版本
所以我們先安裝一下:
npm i
vue@2.6.14 vue-template-compiler@2.6.14
vue-loader@15.9.8 @vue/babel-preset-jsx
-D
然後我們需要去 webpack.config.js
中配置對 .vue
檔案的解析
// 剛才的程式碼...
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// 剛才的程式碼...
plugins: [
// 剛才的程式碼...
new VueLoaderPlugin()
],
module: {
rules: [
// 剛才的程式碼...
{
test: /\.vue$/,
use: 'vue-loader',
}
]
}
}
並且到 babel.config.js
中配置一下,讓webpack支援 .vue
檔案中的 jsx
語法
module.exports = {
presets: [
"@babel/preset-env",
// 支援vue中的jsx語法
"@vue/babel-preset-jsx"
],
plugins: ["@babel/plugin-transform-runtime"]
}
現在我們可以在 src
下新建一個 App.vue
<template>
<div class="box">我是App哈哈哈哈</div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.box {
width: 500px;
height: 200px;
color: #fff;
background-color: #000;
}
</style>
然後改寫一下 src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: (h) => h(App),
}).$mount('#app')
此時我們重新執行 npm run build
,我們可以看看頁面的效果,說明打包成功啦!
配置路徑別名
有時候檔案引用擱著太多層,引用起來會看起來很不明確,比如 ../../../../../App.vue
,所以我們可以配置一下別名 alia
module.exports = {
// 剛才的程式碼...
resolve: {
// 路徑別名
alias: {
'@': path.resolve('./src'),
assets: '~/assets',
tools: '~/tools'
},
// 引入檔案時省略字尾
extensions: ['.js', '.ts', '.less', '.vue'],
},
}
現在別名配置完成啦:
- 配置前:
../../../../../App.vue
- 配置後:
@/App.vue
webpack-dev-server
剛剛我們發現,每改一次程式碼就得重新打包一次,非常繁瑣,有沒有可以改程式碼自動重新打包的呢?這就要用到 webpack-dev-server
npm i webpack-dev-server -D
到 webpack.config.js
中配置 devServer
devServer: {
// 自定義埠號
// port:7000,
// 自動開啟瀏覽器
open: true
},
然後到 package.json
中配置一下啟動命令
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
此時我們執行 npm run serve
就可以啟動專案啦!
區分環境
我們不能把所有配置都配置在一個 webpack.config.js
中,因為我們有兩個環境 development(開發環境)、production(生產環境)
,所以我們在根目錄下建立 build資料夾
,並建立三個檔案
webpack.base.js
:兩個環境共用配置- 入口,輸出配置
- 各種檔案的處理
- 進度條展示
- 路徑別名
webpack.dev.js
:開發環境獨有配置- webpack-dev-server
- 不同的source-map模式
- 不同的環境變數
webpack.prod.js
:生產環境獨有配置- 不同的source-map模式
- 不同的環境變數
我們需要先安裝一個合併外掛 webpack-merge
,用於兩個環境的配置可以合併公共的配置
npm i webpack-merge -D
然後我們在根目錄下新建一個 build資料夾
,並在此資料夾下新建 webpack.base.js、webpack.dev.js、webpack.config.js
webpack.base.js
// 公共配置 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { VueLoaderPlugin } = require('vue-loader') module.exports = { // 入口檔案 main.js entry: { main: './src/main.js' }, // 輸出 output: { // 輸出到 dist資料夾 // 記得改路徑 path: path.resolve(__dirname, '../dist'), // js檔案下 filename: 'js/chunk-[contenthash].js', // 每次打包前自動清除舊的dist clean: true, }, plugins: [ new HtmlWebpackPlugin({ // 選擇模板 public/index.html template: './public/index.html', // 打包後的名字 filename: 'index.html', // js檔案插入 body裡 inject: 'body', }), new MiniCssExtractPlugin({ // 將css程式碼輸出到dist/styles資料夾下 filename: 'styles/chunk-[contenthash].css', ignoreOrder: true, }), new VueLoaderPlugin() ], module: { rules: [ { // 匹配檔案字尾的規則 test: /\.(css|s[cs]ss)$/, use: [ // loader執行順序是從右到左 MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', // { // loader: 'sass-resources-loader', // options: { // resources: [ // // 放置全域性引入的公共scss檔案 // ], // }, // }, ], }, { // 匹配檔案字尾的規則 test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset', parser: { // 轉base64的條件 dataUrlCondition: { maxSize: 25 * 1024, // 25kb } }, generator: { // 打包到 dist/image 檔案下 filename: 'images/[contenthash][ext][query]', }, }, { test: /\.js$/, // 排除node_modules中的js exclude: /node_modules/, use: [ 'babel-loader' ], }, { test: /\.vue$/, use: 'vue-loader', } ] }, resolve: { // 路徑別名 alias: { '@': path.resolve('./src'), assets: '~/assets' }, // 引入檔案時省略字尾 extensions: ['.js', '.ts', '.less', '.vue'] }, }
webpack.dev.js
// 開發環境 const { merge } = require('webpack-merge') const base = require('./webpack.base') module.exports = merge(base, { mode: 'development', devServer: { open: true, // hot: true, } })
webpack.prod.js
// 生產環境 const { merge } = require('webpack-merge') const base = require('./webpack.base') module.exports = merge(base, { mode: 'production' })
然後我們到 package.json
修改一下指令
"scripts": {
"serve": "webpack serve --config ./build/webpack.dev",
"build": "webpack --config ./build/webpack.prod"
},
接下來我們執行這兩個命令,發現都成功了:
npm run build
npm run serve
構建進度條
無論是啟動專案時還是打包時,都需要進度條的展示,所以需要把進度條配置在 webpack.base
中,我們需要先安裝進度條的外掛 progress-bar-webpack-plugin
npm i progress-bar-webpack-plugin -D
// webpack.base.js
// 剛剛的程式碼...
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const chalk = require('chalk')
module.exports = {
// 剛剛的程式碼...
plugins: [
// 剛剛的程式碼...
new ProgressBarPlugin({
format: ` build [:bar] ${chalk.green.bold(':percent')} (:elapsed seconds)`,
})
],
// 剛剛的程式碼...
}
現在我們可以看到無論啟動專案或者打包,都會有進度條了
source-map
source-map
的作用:程式碼報錯時,能快速定位到出錯位置, webpack5
的所有 source-map模式
可以看webpack官網:https://webpack.docschina.org...
這裡我使用兩種模式:
development
:使用eval-cheap-module-source-map
模式,能具體定位到原始碼位置和原始碼展示,適合開發模式,體積較小production
:使用nosources-source-map
,只能定位原始碼位置,不能原始碼展示,體積較小,適合生產模式
所以我們開始配置 source-map
webpack.dev.js
// 剛才的程式碼... module.exports = merge(base, { // 剛才的程式碼... devtool: 'eval-cheap-module-source-map' })
webpack.prod.js
// 剛才的程式碼... module.exports = merge(base, { // 剛才的程式碼... devtool: 'nosources-source-map' })
環境變數
配置 devlopment、production
這兩個環境的環境變數
webpack.dev.js
// 剛才的程式碼... const webpack = require('webpack') module.exports = merge(base, { // 剛才的程式碼... plugins: [ // 定義全域性變數 new webpack.DefinePlugin({ process: { env: { NODE_DEV: JSON.stringify('development'), // 這裡可以定義你的環境變數 // VUE_APP_URL: JSON.stringify('https://xxx.com') }, }, }), ] })
webpack.prod.js
// 剛才的程式碼... const webpack = require('webpack') module.exports = merge(base, { // 剛才的程式碼... plugins: [ // 定義全域性變數 new webpack.DefinePlugin({ process: { env: { NODE_DEV: JSON.stringify('prodction'), // 這裡可以定義你的環境變數 // VUE_APP_URL: JSON.stringify('https://xxx.com') }, }, }), ] })
優化、規範
關於優化、規範,我會另外再寫兩篇文章來講
結語
我是林三心,一個熱心的前端菜鳥程式設計師。如果你上進,喜歡前端,想學習前端,那我們們可以交朋友,一起摸魚哈哈,摸魚群,加我請備註【思否】