9102年webpack4搭建vue項目的方法步驟
前言
首先祝大家元宵節(jié)快樂，最近已經(jīng)好久沒有寫過文章了，剛好趁著這幾天剛剛上班，領導還沒有來，偷偷的寫一篇關于webpack搭建vue的博客。因為公司使用vue比較多，構(gòu)建vue項目使用vue-cli顯得有點臃腫，感覺還是自己配置比較好些，所以就有了這篇教程。由于水平有限，歡迎大家指正，一起進步。
新建項目
1.新建名為webpackconfig文件夾
2.使用命令
npm init -y
在webpackconfig文件夾中生成package.josn
3.下載依賴包
npm i webpack webpack-dev-server webpack-cli -D
4.新建src文件夾并在src中創(chuàng)建main.js文件
alert(1)
5.新建webpack.config.js文件
webpack.config.js文件
var path = require('path');
var config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname + '/dist'),//打包生成文件地址
filename: '[name].build.js',//生成文件ming
publicPath: '/dist/'//文件輸出的公共路徑
}
}
module.exports = config;
entry: 引入文件，對象寫法可以引入多文件
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
output：文件輸出地址
path: 輸出文件地址
filename：輸出文件名
publicPath：文件輸出路徑
6.新建一個index.html文件并引入main.js
<!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>Document</title> </head> <body> <script src="/dist/main.build.js"></script> </body> </html>
7.配置package.json
"dev": "webpack-dev-server --open --hot", "build": "webpack --mode=development --progress --hide-modules",
配置之后運行
npm run dev
會打開一個服務并彈出1
但是webpack會有一個警告，這個警告就是因為沒有配置mode,就是沒有配置相應模式
mode有兩個參數(shù)，一個是開發(fā)模式development一個是生產(chǎn)模式production。
可以在package.json里直接配置
"dev": "webpack-dev-server --mode=development --open --hot"
這樣就沒有警告了
接下來運行
npm run build
會打包生成一個新的dist文件夾
8.引入loader兼容代碼
npm i babel-loader babel-core babel-preset-env -D
babel-preset-env 幫助我們配置 babel。我們只需要告訴它我們要兼容的情況（目標運行環(huán)境），它就會自動把代碼轉(zhuǎn)換為兼容對應環(huán)境的代碼。
更改webpack.config.js文件
module: {
rules: [
{
test: '/\.js$/',
include: path.resolve(__dirname + '/src'),
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: ['env']
}
]
}
]
}
9.下載vue并在main.js引入
import Vue from 'vue';
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
運行項目發(fā)現(xiàn)報錯
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
報這個錯誤原因就是因為使用的是運行版本的vue,編譯版本不能用，這時候在我們需要隨后我們還要配置別名，將 resolve.alias 配置為如下對象
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '/src')
}
}
然后在運行項目，發(fā)現(xiàn)已經(jīng)在頁面上打印出了hello。
一個簡單的基于webpack的vue項目已經(jīng)搭建好了。
接下來就是一些配置
10.配置css
輸入命令下載style-loader css-loader
npm i style-loader css-loader -D
配置module中的rules
{
test: /\.css$/,
use:['style-loader','css-loader'],
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
}
測試引入css，新建index.css并在在main.js中引入
index.css
div{
color:skyblue;
}
import './index.css';
可以看到文字顏色已經(jīng)改變了
11.支持圖片
輸入命令下載file-loader url-loader
npm i file-loader url-loader -D
配置module中的rules
{
test: /\.(jpg|png|gif|svg)$/,
use: 'url-loader',
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
}
測試引入圖片，新建asset文件夾放一張圖片并在在main.js中引入
import img from'./assets/a.png'
在html中顯示
<img :src="img" alt="">
12.引入html-webpack-plugin
輸入命令下載html-webpack-plugin
npm i html-webpack-plugin -D
設置plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['main']
})
]
13.vue開發(fā)需要.vue文件只要引入vue-laoader和vue-template-compiler就行了
輸入命令下載vue-loader vue-style-loader vue-template-compiler
npm i vue-loader vue-style-loader vue-template-compiler -D
配置vue-loader
{
test: '/\.vue$/',
loader: 'vue-loader'
}
還需要引入vue-loader/lib/plugin
var VueLoaderPlugin = require('vue-loader/lib/plugin');
并在plugin實例化
new VueLoaderPlugin()
新建App.vue
<template> <h1>Hello World!</h1></template>
<script> export default { name: 'App' }</script>
<style></style>
更改main.js
import Vue from 'vue';import App from './App.vue';
new Vue({ el: '#app', render: h => h(App)});
運行項目
14.開啟js熱更新
因為 vue-style-loader 封裝了 style-loader，熱更新開箱即用,但是 js 熱更新還不能用，每次修改代碼我們都會刷新瀏覽器，所以我們需要繼續(xù)配置。
const webpack = require('webpack');
并在plugin中配置
new webpack.HotModuleReplacementPlugin()
熱更新已靜開啟
到現(xiàn)在為止webpack構(gòu)建的vue項目已經(jīng)跑起來了。
接下來就是一些優(yōu)化，
15.在resolve配置別名
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
"@": path.resolve(__dirname, 'src'),
"components": path.resolve(__dirname, '/src/components'),
"utils": path.resolve(__dirname + '/src/utils'),
},
modules: ['node_modules']
}
16.支持sass
輸入命令下載sass-loader node-sass
npm i sass-loader node-sass -D
修改webpack.config.js的css
{
test: /\.sass$/,
use:['vue-style-loader',
'css-loader', 'sass-loader'
],
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
},
基本也配置個差不多了，還需要補充一些東西，以后會加上。
這一篇算是webpack構(gòu)建vue項目基礎吧，下一篇會再次補充并深入，謝謝大家，希望大家能多提意見，一起在碼農(nóng)的道路上越走越遠
感恩騙點star項目地址 https://github.com/mr-mengbo/webpackconfig
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Element中的Cascader（級聯(lián)列表）動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader（級聯(lián)列表）動態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue和element上傳圖片以及進行拖拽圖片排序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue Router根據(jù)后臺數(shù)據(jù)加載不同的組件實現(xiàn)
本文主要介紹了根據(jù)用戶所購買服務的不同，有不同的頁面展現(xiàn)。文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文描述了一個Vue3和Vite項目中實現(xiàn)版本更新檢查的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
有時候,頻繁調(diào)用的函數(shù),我們需要把它掛載在全局的vue原型上,方便調(diào)用,這篇文章主要為大家詳細介紹了Vue中掛載全局的具體操作,需要的可以參考下2024-03-03
這篇文章主要介紹了vue-editor-bridge報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖
因為工作中要用到甘特圖,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關于vue2結(jié)合element-ui的gantt圖實現(xiàn)可拖拽甘特圖的相關資料,需要的朋友可以參考下2022-11-11
vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關資料,需要的朋友可以參考下2023-07-07