Webpack构建Vue项目(非Vue脚手架)

最新推荐文章于 2024-06-25 21:35:34 发布

MrHouuu

最新推荐文章于 2024-06-25 21:35:34 发布

阅读量794

点赞数 1

分类专栏：技巧 webpack Vue

本文链接：https://blog.csdn.net/weixin_43721741/article/details/103731808

版权

这篇博客介绍了如何不使用Vue-Cli，而是直接利用Webpack构建Vue项目。从创建项目目录到配置Webpack，包括安装依赖、设置Vue-loader、Babel转换、配置热更新和打包命令，详细阐述了手动搭建Vue项目的过程。

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

我们平时构建Vue项目，经常是用Vue官方提供的Vue-Cli脚手架，搭建起来非常方便，在初始化的时候就为我们完成了很多事情，如

ES6/7/8/9等高级语法转换成ES5
stylus/less/scss等css预处理器转换成css
解析字体font、图片(jpg、png…)等静态资源
压缩js、css等文件
自动添加css各大浏览器厂商前缀
定义环境变量
抽离公共代码
项目热更新和懒加载
区别生产环境和开发环境
每次打包删除上一次打包记录
…

而Cli是基于webpack的工具，这里我要直接用webpack来搭建一个vue项目。

前提
请确保安装了 Node.js 的较新版本,Node-v查看版本号

开始构建项目

创建项目目录(myVuecli)
生成package.json

npm init

在项目中安装webpack

    npm install --save-dev webpack

（如果你使用 webpack 4+ 版本）在项目中安装 webpack-cli

   npm install --save-dev webpack

src 中创建 index.html
src 中创建 main.js（主入口文件）
src 中创建 components (components 存放 vue 组件)
src中创建App.vue文件
在根路径中创建 webpack.config.js

6.安装依赖

>     npm install --save vue
>     npm install --save vue-router
>     npm install --save-dev webpack-dev-server 
>     npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
>     npm install --save-dev css-loader style-loader
>     npm install --save-dev less less-loader
>     npm install --save-dev url-loader
>     npm install --save-dev html-webpack-plugin
>     npm install --save-dev vue-loader vue-template-compiler
>

vue-loader 用于解析.vue文件
vue-template-compiler 用于编译模板配置如下

let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
   
    module:{
   
        rules:[{
   
            test:/\.vue$/,
            use: