溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了webpack4+Vue怎么搭建自己的Vue-cli項(xiàng)目，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
前置知識
?熟悉 webpack4
?熟悉 vue
搭建基本骨架
npm init
安裝webpack4
npm install webpack webpack-cli --save-dev
在開始之前先實(shí)驗(yàn)一下環(huán)境
根目錄新建文件 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width， initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue</title> </head> <body> <script src="./src/mian.js"></script> </body> </html>
根目錄新建文件 src/main.js
console.log("我是main");
根目錄新建文件webpack.config.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, dist),
filename: 'index.js'
}
}打包js文件
npx webpack --config webpack.config.js
會看到一些報(bào)錯,只要構(gòu)建成功就ok
這里說明環(huán)境是沒有問題的
配置初始生成環(huán)境
開始安裝vue-loader吧
npm i webpack vue vue-loader -D //-D就是--save-dev
安裝完成后看輸出
提示安裝的依賴要安裝
npm install webpack css-loader -D
安裝完畢后新建src/app.vue
<template>
<div>
你好 {{ data }}
</div>
</template>
<script>
export default {
data(){
return {
data: "Vue"
}
}
}
</script>
<style scoped>
</style>.vue文件是無法直接運(yùn)行的,需要在webpack里面配置loader
這里參照某課的老師的方法,html用webpack生成(后面說明)
在根目錄新建index.js 刪除index.html
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)改寫webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'), //關(guān)于path模塊可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}]
}
}在package里面添加腳本
"build": "webpack --config webpack.config.js"
控制臺運(yùn)行
npm run build
不出意外會報(bào)錯
這里有2個問題,一個是沒有指定mode 一個是沒有引用vue的插件
我們需要改寫webpack.config.js,在config里面加一行
mode: 'production', //暫時指定為生產(chǎn)環(huán)境
再次運(yùn)行npm run build 會報(bào)錯,需要安裝一個包
這個報(bào)錯,原本在vue-loader就有提示,不知道為什么現(xiàn)在沒有,運(yùn)行之前報(bào)錯
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options
安裝vue-template-compiler
npm install vue-template-compiler -D
再再次運(yùn)行npm run build
假如按步驟來不除意外這里可以打包成功了~~~~
我們需要驗(yàn)證打包文件時候是否正確,所以這里使用插件HtmlWebpackPlugin,幫我們自動創(chuàng)建html文件,并且在后續(xù)的hash文件名上很有用,具體可以看官方介紹
npm install html-webpack-plugin -D
改webpack.config.js代碼
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
mode: 'production', //暫時指定為生產(chǎn)環(huán)境
entry: path.resolve(__dirname, 'src/index.js'), //關(guān)于path模塊可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin()
]
}npm run build打包一下,dist文件夾下面會有兩個文件
啟動一個靜態(tài)服務(wù)器
打包Vue程序完成~~~~
至此完成了最基本的webpack配置
接下來我們要完成的的配置開發(fā)環(huán)境
配置開發(fā)環(huán)境
關(guān)于開發(fā)環(huán)境以及生成環(huán)境,webpack是需要區(qū)分的,根據(jù)文檔模塊,我決定在命令里面指定模式,相應(yīng)的就將開發(fā)環(huán)境以及生成環(huán)境分開,
這里我使用的是提起基本的webpack配置使用webpack-merge這個包來拼接我們webpack配置
npm i webpack-merge -D
修改配置文件
將各各環(huán)境的代碼區(qū)分開,webpack的結(jié)構(gòu)是這樣的
webpack.config.base.js
const path = require('path')
const config = {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}]
}
}module.exports = config
webpack.config.build.js
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const config = merge(baseConfig ,{
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin()
]
})module.exports = config
這里配置開發(fā)環(huán)境就是重頭戲了,我們使用webpack-dev-server
webpack-dev-server是一個小型的Node.js Express服務(wù)器,代碼都跑在內(nèi)存里面
安裝webpack-dev-server
npm install webpack-dev-server -D
webpack.config.dev.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = merge(baseConfig, {
devServer: {
port: '8000',
host: 'localhost',
hot: true, //熱加載
//quiet: true //控制臺中不輸出打包的信息
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
]
})
module.exports = config最后在package里面添加腳本
"build": "webpack --mode=production --config build/webpack.config.build.js",
"dev": "webpack-dev-server --mode=development --progress --config build/webpack.config.dev.js"
執(zhí)行npm run dev查看控制臺
這就成功了,在瀏覽器里面輸入http://localhost:8000/,修改app.vue文件,實(shí)現(xiàn)了vue-cli的熱加載了~~~~
接下來完善一下,不能只有.vue文件的loader,其他的webpack也要認(rèn)識
我們配置一下圖片的loader,以及css的loader,同時css使用postcss進(jìn)行預(yù)處理
url-loader 用于將文件轉(zhuǎn)換為base64 URI file-loader是依賴loader
npm i url-loader file-loader -D
添加配置webpack.config.base.js>module>rules
{
test: /\.(gif|png|jpg|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 2048,
name: 'resources/[path][name].[hash:8].[ext]'
}
}]
},配置css(vue-cli里面的實(shí)現(xiàn)非常友好,有機(jī)會可以去看看) 下面的是最簡單的配置
npm install css-loader -D npm install style-loader -D npm install postcss-loader -D
添加配置webpack.config.base.js>module>rules (postcss不了解谷歌一下)
{
test: /\.css$/,
use: [
'css-loader',
'style-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true //啟用源映射支持，postcss-loader將使用其他加載器給出的先前源映射并相應(yīng)地更新它
}
}
]
}
npm install autoprefixer -D根目錄新建文件postcss.config.js,安裝autoprefixer (自動添加瀏覽器前綴)
const autoprofixer = require('autoprefixer')
module.exports = {
plugins: [
autoprofixer()
]
}配置到這里基本的圖片以及css就配置完成了,運(yùn)行一下試試 npm run dev
我找src下面創(chuàng)建了assets/img/user.jpg
app.vue
<template>
<div>
你好 {{ data }}
<img src="./assets/img/user.jpg">
</div>
</template>
<script>
export default {
data(){
return {
data: "Vue Cli"
}
}
}
</script>
<style>
div{
font-size: 20px;
color: red;
}
img {
width: 100px;
}
</style>
實(shí)現(xiàn)了開發(fā)環(huán)境的圖片以及css的配置
打包一下試試
build后生成的目錄是這樣的
這不是我們想要的,webpack把代碼,類庫,css都打包在一起,這樣不管是上線還是首屏加載都有影響,所以這里我們要優(yōu)化webpack
在處理之前想安裝一個可以幫助我們每次build之前自動刪除上次build生成的文件的插件
clean-webpack-plugin這個插件不知道為什么,怎么配置路徑都沒效果
這里我使用rimraf來進(jìn)行刪除(vue-cli也是使用rimraf,但是他是寫在代碼里面)
npm install rimraf -D
在package里面變一下腳本,讓打包之前幫我們刪除之前到打包文件
"build-webpack": "webpack --mode=production --config build/webpack.config.build.js",
"delete": "rimraf dist",
"build": "npm run delete && npm run build-webpack"
分離打包c(diǎn)ss
它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨(dú)立分離的 CSS 文件
npm install extract-text-webpack-plugin@next -D
因?yàn)殚_發(fā)環(huán)境和生產(chǎn)環(huán)境不一樣
我們需要將css部分的代碼分環(huán)境配置
1.將原先的css配置放到webpack.config.dev.js里面
2.在webpack.config.build.js里面重寫
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
})
}]
},這樣的話,我們開發(fā)環(huán)境不影響依舊是之前到模式,build的時候用ExtractTextPlugin幫我們分離非js文件,實(shí)現(xiàn)css的分離打包
我們打包一下試試npm run build
分離js文件
接下來是分離js文件,就是將庫文件以及我們的代碼分離開,利于上線后的瀏覽器緩存,代碼會經(jīng)常變,庫不會經(jīng)常變
在webpack4之前js分離用的插件是CommonsChunkPlugin,不過這插件現(xiàn)在移除了,現(xiàn)在用的是optimization.splitChunks 來進(jìn)行公共代碼與第三方代碼的提取,splitChunks參數(shù)如下
optimization: {
splitChunks: {
chunks: "initial", // 代碼塊類型 必須三選一： "initial"（初始化） | "all"(默認(rèn)就是all) | "async"（動態(tài)加載）
minSize: 0, // 最小尺寸，默認(rèn)0
minChunks: 1, // 最小 chunk ，默認(rèn)1
maxAsyncRequests: 1, // 最大異步請求數(shù)， 默認(rèn)1
maxInitialRequests: 1, // 最大初始化請求書，默認(rèn)1
name: () => {}, // 名稱，此選項(xiàng)課接收 function
cacheGroups: { // 緩存組會繼承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置緩存組。
priority: "0", // 緩存組優(yōu)先級 false | object |
vendor: { // key 為entry中定義的 入口名稱
chunks: "initial", // 必須三選一： "initial"(初始化) | "all" | "async"(默認(rèn)就是異步)
test: /react|lodash/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk
name: "vendor", // 要緩存的 分隔出來的 chunk 名稱
minSize: 0,
minChunks: 1,
enforce: true,
reuseExistingChunk: true // 可設(shè)置是否重用已用chunk 不再創(chuàng)建新的chunk
}
}
}
}官方包括這解釋,我并不是很看懂,所以打包策略并不是很好
在webpack.config.build.js>config
output: {
filename: '[name].[chunkhash:8].js'
},
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
vendor: {
test: /node_modules/, //這里雖然分離了,但是沒有做到按需引入,看官方配置也不是很明白
name: 'vendors',
chunks: 'all'
}
}
},
runtimeChunk: true
}build一下查看目錄,可以看出代碼與庫之間分離了
關(guān)于eslint,我就不引入的,有興趣可以討論一下
.gitignore
這里處理一下git 新建文件.gitignore
.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln .editorconfig,
處理一下編譯器的統(tǒng)一配置
新建文件 .editorconfig,(關(guān)于editorconfig,以及配置解釋)
root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
還有一點(diǎn)要注意,假如沒有效果,vscode需要安裝一個插件EditorConfig for VS Code,其他編譯器不太清楚
.babelrc
處理一下ES6,以及js文件的webpack的loader配置
今天裝了babel-loader8.0.0 報(bào)錯報(bào)一上午,心態(tài)都搞崩了,所以這里我使用的是7版本
npm install babel-loader@7 babel-core babel-preset-env -D
在webpack.config.base.js>module>rules里面添加代碼
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}新建文件 .babelrc
{
"presets": [
"env"
]
}首先檢查開發(fā)環(huán)境
我新建了一個es6語法的js 導(dǎo)入到app.vue里面
運(yùn)行結(jié)果
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“webpack4+Vue怎么搭建自己的Vue-cli項(xiàng)目”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼