webpack4手动搭建手动搭建Vue开发环境实现开发环境实现todoList项目的方法项目的方法
前言前言
平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时
间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗?
基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍
文章,分享心得,哈哈!!
基于个人的时间精力问题,把本项目教程分为两部分:
webpack4手动搭建手动搭建Vue开发环境开发环境 (本篇文章)
手动搭建手动搭建Vue项目文件夹实现项目文件夹实现todoList (包括Vue全家桶)
希望你能把教程看完,并且能收货到你想要的东西,嘻嘻,好了,开始!!
一、搭建一、搭建webpack运行环境运行环境
鉴于文章篇幅的长度,本教程不会详细讲述webpack4的知识点,如果对搭建步骤有什么疑惑的或者有知识点看不懂的,可以
先自行Google搜索一下,我悄悄跟你说,webpack4还是有很多坑的,但是所谓的进步就是不断不断地踩坑(捂脸表情)!!
初始化项目初始化项目
在命令行中运行 npm init -y 初始化项目,生产 package.json 文件
安装安装webpack依赖依赖
npm i webpack webpack-cli --save-dev
基本项目目录搭建基本项目目录搭建
webpack.base.dev.js基本配置
修改脚本命令修改脚本命令
在修改 package.json 文件里的 scripts 配置
运行运行webpack
在 main.js 里面输入 document.write("Hello World")
根据上述图片配置 webpack.base.dev.js 文件
在命令行中运行 npm run test 命令,dist文件夹里会有js文件生成
在 index.html 引入,若成功输出 Hello World 即证明webpack运行环境配置成功…
二、开始搭建二、开始搭建Vue环境环境
Vue运行环境分为开发环境和生产环境,不同的环境对功能的实现要求也是不一样的,比如生产环境需要压缩代码,而开发环
境需要sourceMap便于调试,而这两种环境也有公共的配置!!