個人中心
退出
webpack構(gòu)建自定義vue應用
在上一篇中我們利用webpack從0到1搭建了一篇最基本的react應用，而vue在團隊項目里也是用得非常之多，我們?nèi)绾尾灰蕾噕ue-cli腳手架搭建一個自己的vue工程化項目呢？
相比較react,vue所需要的插件要少得多，我們知道在vue中，大多數(shù)是以.vue的模版組件，因此關(guān)鍵是我們可以用webpack的相關(guān)loader能夠解析.vue文件即可,在vue項目中解析單文件組件，熱加載，css作用域等全部依賴于這個插件vue-loader[1]，因此vue-loader算是vue工程化中必不可少的一個插件。
正文開始...
初始化項目
新建一個webpack-03-vue目錄，執(zhí)行npm init -y
安裝相關(guān)基礎配置插件
npm i webpack webpack-cli fs-loader css-loader style-loader html-webpack-plugin mini-css-extract-plugin -D
安裝vue最新版本,執(zhí)行以下命令
npm i vue -s
安裝解析.vue文件的loader
npm i vue-loader -D
配置loader
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader' // 與 use: ['vue-loader']等價
}
]
},
}
除了設置loader,我們還需要引入另外一個插件VueLoaderPlugin,不然運行項目加載template時就會報錯。
// webpack.config.js
const HtmlWebpackPlguins = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入VueLoaderPlugin 必不可少
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
...
plugins: [
new HtmlWebpackPlguins({
template: './public/index.html'
}),
new miniCssExtractPlugin({
filename: 'css/[name].css'
}),
new VueLoaderPlugin(),
]
}
如果我們需要提取css，我們需要把style-loader換成miniCssExtractPlugin.loader即可
// webpack.config.js
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader']
},
...
]
}
所有配置完成后,看下最終的webpack.config.js完整配置
const path = require('path');
const HtmlWebpackPlguins = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name][hash].js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
use: [
miniCssExtractPlugin.loader,
'css-loader',
{
loader: 'less-loader'
},
{
loader: 'postcss-loader'
// options: {
// postcssOptions: {
// plugins: [['postcss-preset-env']]
// }
// }
}
]
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlguins({
template: './public/index.html'
}),
new miniCssExtractPlugin({
filename: 'css/[name].css'
}),
new VueLoaderPlugin()
]
};
我們在src目錄下新建一個index.js與App.vue文件
<!--App.vue-->
<template>
<div class="app">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
<h3>{{publicText}}</h3>
</div>
</template>
<script>
import {reactive, toRefs } from 'vue';
export default {
name: 'App',
setup() {
const info = reactive({
name: 'Maic',
age: 18,
publicText: 'web技術(shù)學苑'
})
return {
...toRefs(info)
}
},
}
</script>
<style scoped>
.app h1{
color: red;
}
</style>
我們在index.js中引入App.vue文件
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
運行npm run server,打開地址localhost:8080訪問
在vue中會用less，因此我們看下less在vue中的運用
配置less
在項目中，我們會用less,scss或者stylus這樣的第三方css編譯語言，在vue項目中需要有對應的loader加載才行
安裝npm i less less-loader -d，并設置loader[2]
// webpack.config.js
module.exports = {
module: {
rules: [
...
{
test: /\.less$/,
use: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
]
}
}
在App.vue中設置less
<style lang="less" scoped>
.app{
h1 {
color: red;
& {
font-size:30px;
}
}
h2 {
display: flex;
}
}
</style>
ok頁面已經(jīng)支持less了,我們知道css有很多特性需要些支持多個瀏覽器的兼容性，因此會有很多的前綴,譬如--webkeit--，--ms--等等,那么這些前綴，我能否利用插件來支持呢，因此我們需要了解一個插件postcss
配置postcss
postcss有很多可配置的參數(shù)，更多參考可以查看官網(wǎng)webpack-postcss[3]，也可以查看更詳細api文檔github-postcss[4]實現(xiàn)更多的功能
npm install --save-dev postcss-loader postcss postcss-preset-env
我們在loader上加上postcss-loader
module.exports = {
module: {
rules: [
...
{
test: /\.less$/,
use: [
miniCssExtractPlugin.loader,
'css-loader',
{
loader: 'less-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [['postcss-preset-env']]
}
}
}
]
},
]
}
}
我們注意到官方提供了一個autoprefixer,但是我們這里使用的是postcss-preset-env,實際上這個插件已經(jīng)有了autoprefixer的功能。
從官網(wǎng)了解到，你可以在webpack.config.js的loader中設置postcss-preset-env，你也可以在根目錄新建一個文件postcss.config.js以此來代替loader的設置
// postcss.config.js
module.exports = {
plugins: [['postcss-preset-env']]
};
因此你就會看到樣式user-select加了前綴
但是你會發(fā)現(xiàn)，為啥display:flex沒有前綴，因此有一個對瀏覽器兼容性設置的配置，實際上安裝webpack時就已經(jīng)給我們自動安裝了，主要依靠.browserslist來設置支持瀏覽器的前綴css
browserslist
這個插件主要是可以讓你的樣式兼容多個不同版本的瀏覽器，如果指定的版本瀏覽器比較高，那么一些支持的特性就會自動支持，所以就不會設置前綴，具體可以參考browserslist[5]
你可以在package.json中設置，比如像下面這樣
{
...
"dependencies": {
"vue": "^3.2.36"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
當你設置完后，你會發(fā)現(xiàn)，重新執(zhí)行npm run server,對應的display:flex就已經(jīng)加了前綴了。
或者你可以在根目錄新建一個.browserslistrc文件，與package.json設置的等價
> 1%
last 2 versions
終于關(guān)于用webpack搭建vue的min工程版已經(jīng)可以了，項目還有一些圖片加載，字體圖標啊這些都是file-loader插件的事情，后續(xù)有用上的時候就安裝支持配置一下，具體也可參考這一篇文章webpack從0到1構(gòu)建也有相關(guān)file-loader的設置
看完是不是覺得webpack配置vue沒那么難了
總結(jié)
安裝webpack,webpack-cli等基礎插件，支持vue核心插件vue-loader
.vue文件需要vue-loader編譯，需要配置對應loader,在webpack.config.js中需要加入VueLoaderPlugin插件，一定要引入,不然會直接報錯。
less與postcss的安裝，主要依賴less,less-loader, postcss,posscss-loader,postcss-preset-env這些插件支持，既可以在loader中支持配置postcss-preset-env,可以用postcss.config.js來代替設置
browserslist配置設置，內(nèi)部主要是依賴 caniuse-lite 與Can I Use 來做瀏覽器兼容性查詢的
本文code-example[6]
參考資料
[1]
vue-loader: https://vue-loader.vuejs.org/zh/
[2]
loader: https://webpack.docschina.org/loaders/less-loader/
[3]
webpack-postcss: https://webpack.docschina.org/loaders/postcss-loader/
[4]
github-postcss: https://github.com/webpack-contrib/postcss-loader
[5]
browserslist: https://www.npmjs.com/package/browserslist
[6]
code-example: https://github.com/maicFir/lessonNote/tree/master/webpack/webpack-03-vue
作者：Maic
歡迎關(guān)注微信公眾號 ：web技術(shù)學苑
分類導航