VueJS -- 使用vue+webpack搭建一个vue简单工程项目

最新推荐文章于 2024-10-04 10:51:51 发布

wust_cyl

最新推荐文章于 2024-10-04 10:51:51 发布

阅读量1.4k

点赞数

分类专栏： Vue.js 文章标签： VueJS -- 使用vue+webpack搭建一个vue简

本文链接：https://blog.csdn.net/wust_cyl/article/details/91041163

版权

本文介绍了如何不依赖vue-cli，使用VueJS和Webpack从零开始搭建一个简单的Vue项目。主要内容包括理解Webpack的工作原理，配置entry和output，设置module规则处理不同类型的文件，使用VueLoaderPlugin和CleanWebpackPlugin等插件，以及通过HtmlWebpackPlugin生成HTML文件。同时，讲解了如何配置webpack-dev-server以实现热加载，并通过npm命令进行打包和开发环境的运行。

摘要由CSDN通过智能技术生成

创建VUE工程项目，我们可以使用vue-cli这款脚手架，但是这里面得一些细节被屏蔽了，如果你不清楚原生使用wepack配置的话，那么项目如果需要对vue-cli配置进行修改，可能你会无从下手。

我们先来看一下项目目录。

app里面放的是项目资源，index.js是入口文件 index.css是全局样式表 index.vue是最外面的父组件

components是一些组件

dist文件是webpack的出口文件

statics里面存放的是一个模板html

重点就是webpack.config.js文件 webpack的配置文件。

实现目标：不依赖vue-cli脚手架我们可以使用vue+webpack运行简单的vue项目。

webpack.config.js文件



//配置webpack
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const VueLoaderPlugin =  require('vue-loader/lib/plugin');
const Webpack = require("webpack");

const dev = pr