Webpack 搭建 Vue3 腳手架詳細步驟

創建一個新的 Vue 項目

1）初始化項目目錄

新建一個文件夾，或者使用以下指令

mkdir webpack-vue_demo
cd webpack-vue_demo

2）初始化 npm 項目

npm init -y

3）安裝 vue 和 webpack 相關依賴

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save

如果需要支持 ES6+ 語法，還需要安裝相應的 Babel 依賴：

npm install @babel/core @babel/preset-env babel-loader --save-dev

安裝完成后，package.json 文件中會包含這些依賴：

在這里插入圖片描述

設置項目結構

PS：以下文件均使用 Vue3 語法

1）創建項目文件

在 node_modules 同級創建 src 文件夾，src 里面創建 main.js、App.vue、index.html

在這里插入圖片描述

2）編寫簡單的 vue 組件（src/App.vue）

<template><div id="app"><img alt="Vue logo" src="./assets/green.png"><h1>{{ message }}</h1></div>
</template><script>
import { ref } from 'vue'export default {name: 'App',setup() {const message = ref('Hello Vue!')return {message}}
}
</script><style>
#app {max-width: 300px;margin: auto;
}
</style>

3）編寫入口文件（src/main.js）

import { createApp } from 'vue'
import App from './App.vue'
import './assets/green.png'createApp(App).mount('#app')

4）創建 html 模板（src/index.html）

<script src="/bundle.js"></script>：告訴瀏覽器從服務器加載并執行bundle.js文件，這個文件是 Webpack 打包應用后生成的，包含了整個應用代碼。在開發過程中，Webpack Dev Server 會提供這個文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Vue App</title>
</head>
<body><div id="app"></div><script src="/bundle.js"></script>
</body>
</html>

配置 Webpack

1）創建 Webpack 配置文件

與 package.json 同級創建 webpack.config.js，有些依賴還未安裝的需要安裝，比如 vue-style-loader、css-loader

npm install vue-style-loader css-loader --save-dev

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /.vue$/,loader: 'vue-loader'},{test: /.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /.css$/,use: ['vue-style-loader','css-loader']},{test: /.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource'}]},plugins: [new VueLoaderPlugin()],devServer: {static: {directory: path.resolve(__dirname, 'src'), // 從src提供靜態文件},}
}

2）添加構建和開發腳本

在 package.json 文件的 scripts 中添加：

  "scripts": {"build": "webpack --mode production","dev": "webpack serve --mode development"},

在這里插入圖片描述

運行和構建項目

1）運行項目

npm run dev

運行成功如下圖所示，通過訪問地址即可看見頁面

在這里插入圖片描述

2）構建項目

npm run build

構建成功后會生成 dist：

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/91867.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/91867.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/91867.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！