从零开始用webpack构建一个vue3.0项目工程的实现

2023-07-14 19:00:03 65

前言

入门级别教程，适用于初级工程师
移动端单页面 Demo

正文

第一步

找一个你认为合适的磁盘。输入mkdirtest,cdtest,npminit-y。

第二步

安装依赖

webpack系列依赖

webpackwebpack-cli

babel系列依赖

@babel/core@babel/preset-env

移动兼容方案

amfe-flexibleautoprefixer

axios

axios

webpackloader

babel-loader

css-loader

file-loader

postcss-loader

pm2rem-loader

style-loader

这个单独说一下，vue3.0sfc重写了对.vue文件的编译方式，使用parseComponent等方法，必须使用-v16后缀的这个loader，当时找这个loader用了较长的时间

vue-loader-v16
vue-template-complier

webpackplugin

html-webpack-plugin
webpack-dev-server

Vue&Vuex

vue@next

vuex@next

请使用yarnadd或者npmi安装上述依赖包

第三步

在当前根目录创建index.html，初始化HTML代码






h5static

创建.babelrc，初始化babel配置

{
"presets":["@babel/preset-env"]
}

创建postcss.config.js初始化postcss配置

module.exports={
plugins:[require('autoprefixer')],
}

创建.gitignore

node_modules
.vscode
.idea

创建scripts目录，编写yarn锁定脚本

if(!/yarn\.js$/.test(process.env.npm_execpath||'')){
console.warn(
'\u001b[33mThisrepositoryrequiresYarn1.xforscriptstoworkproperly.\u001b[39m\n'
)
process.exit(1)
}

将脚本配置在package.json配置中

{
"name":"h5-static",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"start":"webpack-dev-server",
"build":"webpack--mode=production",
"preinstall":"node./scripts/checkYarn.js"
},
"author":"upeartaker",
"license":"ISC",
"dependencies":{
"@babel/core":"^7.11.6",
"@babel/preset-env":"^7.11.5",
"@vue/compiler-sfc":"^3.0.0",
"amfe-flexible":"^2.2.1",
"autoprefixer":"8.0.0",
"axios":"^0.20.0",
"babel-loader":"^8.1.0",
"css-loader":"^4.3.0",
"file-loader":"^6.1.0",
"html-webpack-plugin":"^4.5.0",
"postcss-loader":"^4.0.2",
"px2rem-loader":"^0.1.9",
"style-loader":"^1.2.1",
"vue":"^3.0.0",
"vue-loader":"^15.9.3",
"vue-loader-v16":"^16.0.0-beta.5.4",
"vue-template-compiler":"^2.6.12",
"vuex":"^4.0.0-beta.4",
"webpack":"^4.44.2",
"webpack-cli":"^3.3.12",
"webpack-dev-server":"^3.11.0"
},
"browserslist":[
"defaults",
"notie<11",
"last2versions",
">1%",
"iOS7",
"last3iOSversions"
]
}

其中preinstall为yarn锁定脚本

创建src目录，在src目录中分别创建services,pages,components，store目录，对应存放ajax,视图，组件，全局状态管理。
创建webpack.config.js文件，编写webpack配置

constpath=require('path')
constVueLoaderPlugin=require('vue-loader-v16/dist/plugin.js').default
constHtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
entry:path.resolve(__dirname,'./src/main.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
},
resolve:{
extensions:['.js'],
},
module:{
rules:[
{
test:/\.js$/,
use:['babel-loader'],
exclude:/node_modules/,
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
{
loader:'px2rem-loader',
options:{
remUnit:37.5,
},
},
{
loader:'postcss-loader',
options:{
sourceMap:true,
postcssOptions:{
path:'postcss.config.js',
},
},
},
],
},
{
test:/\.(png|svg|jpg|gif)$/,
use:['file-loader'],
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['file-loader'],
},
{
test:/\.vue$/,
loader:'vue-loader-v16'
}
],
},
optimization:{
minimize:true,
},
plugins:[
newHtmlWebpackPlugin({
template:path.resolve(__dirname,'./index.html'),
inject:'body',
}),
newVueLoaderPlugin()
],
}

第四步

编写Demo，测试工程是否可以使用。

进入src目录下，创建main.js文件，编写以下代码，

import'amfe-flexible'
import'./index.css'
import{createApp}from'vue'
importAppfrom'./App.vue'

constapp=createApp(App)

app.mount('#app')

创建App.vue文件，编写一下代码

第五步

执行脚本yarnstart

总结

webpack配置简单易学，声明式的接口规范，开发人员只需关注功能点即可完成配置。此工程webpack配置上没有任何难点，做过Vue-cli2.0项目的同学，可以直接略过。
自己动手搭建项目时，建议大家先梳理项目结构，列出需要扩充的功能点，按照节点向上的方式，完善项目。如果以工程化的视角看这个项目，它只能属于leaflevel。

到此这篇关于从零开始用webpack构建一个vue3.0项目工程的实现的文章就介绍到这了,更多相关webpack构建vue3.0项目工程内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

从零开始用webpack构建一个vue3.0项目工程的实现

热门推荐

随机推荐