从零开始手写vue项目的webpack基础配置

一、创建目录结构

执行yarn init, 生成package.json文件;

1、写入文件

建立目录结构可参考vue项目目录结构；

首先建立一个src文件夹，其中包含index.html,App.vue, main.js,
其中

index.html 用于挂在vue实例，和外部访问的页面文件
App.vue 用于写入vue文件的入口文件
main.js 用于创建vue实例，并将实例挂在到index.html

2、初始化文件内容

index.html：其中id=app作为挂在vue实例的节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>

App.vue: vue文件的入口

<template><div class="root"><!-- <router-view /> -->qweqweqweqwe</div>
</template><script>export default{name: "App",data(){return{routerTransition: 'router-slide-left',}}}
</script>
<style scoped>.root{color: blue;font-size: 20px}
</style>

main.js: 项目的入口文件，实例化vue，并将vue实例挂载到指定dom（此项目问 id=app的div元素）上

import {createApp} from 'vue';
import App from './App.vue';createApp(App).mount('#app');

3、配置webpack配置

新建文件webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: "./src/main.js",mode: "development",output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'},devServer: {// contentBase: path.join(__dirname, "dist"),compress: true,port: 9000},module:{rules:[{test: /\.vue$/,use: ['vue-loader'],exclude: /node_modules/},{test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则{test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},{test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},{test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},{test:/\.js$/, use:'babel-loader',exclude:/node_modules/},]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: './src/index.html'})],
}

配置并安装以上webpack配置中loader和plugin对应的依赖；如package.json所示

{"name": "vue-webpack","version": "1.0.0","description": "从零配置vue的webpack开发环境","main": "index.js","author": "zmb","license": "MIT","scripts": {"start": "webpack-dev-server --config webpack.config.js","build": "webpack --config webpack.config.js"},"devDependencies": {"vue": "^3.2.37","vue-router": "^4.1.4","webpack": "^5.74.0","webpack-cli": "^4.10.0"},"dependencies": {"@babel/core": "^7.19.0","babel-loader": "^8.2.5","css-loader": "^6.7.1","html-webpack-plugin": "^5.5.0","less-loader": "^11.0.0","sass-loader": "^13.0.2","style-loader": "^3.3.1","url-loader": "^4.1.1","vue-loader": "^17.0.0","webpack-dev-server": "^4.10.1"}
}

确定目录结构

project
|--src|--index.html|--view|-- App.vue|--main.js
|--webpack.config.js
|--package.json

打包与启动

打包使用webpack命令结合webpack.config.json配置文件打包生成dist文件夹；
本地启动使用webpack-dev-server结合webpack.config.json配置文件在本地启动server；

至此，我们通过webpack配置的vue项目就搭建完成了！

从零开始手写vue项目的webpack基础配置相关推荐

建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
node怎么把token放到redis_从零开始手写 redis（八）朴素 LRU 淘汰算法性能优化
前言 java从零手写实现redis(一)如何实现固定大小的缓存? java从零手写实现redis(三)redis expire 过期原理 java从零手写实现redis(三)内存数据如何重启不丢失? ...
从零开始手写VIO第三章作业（含关键点细节及思维过程）
文章目录前言·与同主题博文的不同 1.代码修改 1.1阻尼因子 µ 随着迭代变化的曲线图 1.2完成曲线y = ax^2^ + bx + c的参数估计 1.3实现其他更优秀的阻尼因子策略 2.公式推 ...
深蓝学院《从零开始手写VIO》作业六
深蓝学院<从零开始手写VIO>作业五深蓝学院<从零开始手写VIO>作业六 1. 证明题 2. 代码题深蓝学院<从零开始手写VIO>作业六 1. 证明题证明Dy ...
深蓝学院《从零开始手写VIO》作业五
深蓝学院<从零开始手写VIO>作业五 1. 完成Bundle Adjustment求解器 2. 完成测试函数 3. 论文总结 1. 完成Bundle Adjustment求解器完成单目 ...
深蓝学院《从零开始手写VIO》作业三
深蓝学院<从零开始手写VIO>作业三深蓝学院<从零开始手写VIO>作业三 1. 代码修改 2. 公式推导 3. 公式证明: 深蓝学院<从零开始手写VIO>作业三 ...
druid连接池初始化慢_从零开始手写 mybatis （三）jdbc pool 从零实现数据库连接池
前景回顾第一节从零开始手写 mybatis(一)MVP 版本中我们实现了一个最基本的可以运行的 mybatis. 第二节从零开始手写 mybatis(二)mybatis interceptor ...
从零开始手写VIO 第二章 IMU传感器
第二章 IMU传感器课程代码: https://github.com/kahowang/Visual_Internal_Odometry/tree/main/%E7%AC%AC%E4%BA%8C%E ...
（超全）Vue.js学习笔记—webpack基础配置（webpack4+babel7+vue2）
webpack基础配置&&单文件组件与vue-loader 参考<Vue,js>实战(梁灏编著) 笔者近期学习Vue.js进阶篇,参考教程流程完成webpack.vue.b ...