webpack 打包和手动创建一个vue的项目

首先我们为啥要用webpack,为啥不用其他的打包的工具。

先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。

Gulp侧重于前端开发的 整个过程 的控制管理(像是流水线),我们可以通过给gulp配置不通的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程。

看到这么多解释什么我自己都不想看了,就总结一句人话webpack 就是一可以任意打包模块的一工具 Webpack是一个模块包

而gulp 就像一个任务的执行者 一个工厂的流水线有各种定义与规范。

说了这么多的废话,开始我们今天的主题,此篇偏向小白教程!大佬跳过~~

我们这么手动新建一个vue的项目与打包,

首先我们第一步,在电脑任意盘符新建一个文件夹

然后要确定你电脑以装了node 与vue,不会我会在出一篇教程,先默认以装

注意请不要命名和路径有中文,

先看看这原理图!

然后在运行环境中输入npm init -y  这意思就是当前的文件夹变为node包,

cnpm  install webpack webpack-cli  -D

我们先自己编译器新建一个文件必须自己刚新建的文件夹下新建文件必须是webpack.config.js

再继续在新建文件和文件件如图  注意此处图片中main.js要放在src文件夹下 图中有误。

然后将webpack的文件中编写如图:我都有注释

和在main 文件中写 随便打印一句到控制台的话:如 console.log("你好陌生人!")

然后在刚刚运行台中输入

就好

然后就可以看到

这说明已经打包完成了

原文地址:https://www.cnblogs.com/youguo2/p/10986810.html

时间: 2024-10-24 11:41:41

webpack 打包和手动创建一个vue的项目的相关文章

【vue】创建一个vue前端项目,编译,发布

[一]mac检查是否安装node.js nvm --version =>0.33.9 node -v =>v10.7.0 [二]安装vue-cli cnpm install --global vue-cli [三]创建一个vue项目.基于 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可 原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.htm

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

node创建一个Vue项目

vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢?进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续安装

如何用Maven创建一个普通Java项目

一下内容包括:用Maven创建一个普通Java项目,并把该项目转成IDEA项目,导入到IDEA,最后把这个项目打包成一个jar文件. 有时候运行mvn命令失败,重复运行几次就OK了,无解. 1.用Maven模板创建一个项目 打开控制台,进入到想要创建项目的目录,然后运行如下命令,参数自由填写: 1 mvn archetype:generate -DgroupId={project-packaging} 2 -DartifactId={project-name} 3 -DarchetypeArti

Django入门第一步(安装和创建一个简单的项目)

目录 Django入门第一步(安装和创建一个简单的项目) 一. Django项目目录结构 二.注意事项 三.Django安装 3.1.安装命令 3.2.验证django是否安装成功 3.3.使用方法 Django入门第一步(安装和创建一个简单的项目) 在使用Django框架开发web应用程序时,开发阶段同样依赖wsgiref模块来实现Server的功能,我们使用Django框架是为了快速地开发application. 如果使用的是我们自定义的框架来开发web应用,需要事先生成框架包含的一系列基础

soapui中文操作手册(一)----创建一个新的项目

1) 创建一个新的项目 点击项目,选择新建项目SOAP.这将打开一个新的SOAP项目对话框. 注意:你也可以做CTRL + N(WIN)或CMD+ N(MAC)来创建一个新的SOAP项目. 在新的SOAP项目对话框中输入项目名称,然后单击确定 这将创建在导航器一个新的项目. 恭喜你,你刚刚创建了你的第一个项目SoapUI.让我们添加一个WSDL. 2) 添加一个WSDL 在SoapUI项目中,SOAP大多是基于一个WSDL.虽然不是必须通过导入WSDL,但它使测试更容易,因为WSDL包含您需要了

创建一个动态Web项目:

开始你的Eclipse,然后进入"文件">"新建">"动态Web项目,然后输入项目名称为HelloWorldStruts2和设置其他的选项,在下面的屏幕: 选择在屏幕上的所有默认选项,最后检查生成的web.xml部署描述符选项.这将创建一个动态Web项目在Eclipse中.现在去窗口>显示视图>项目资源管理器,你会看到你的项目窗口中的东西如下: 现在复制以下文件从Struts 2的lib文件夹C:\struts-2.2.3\lib添

快速创建一个vue 项目

首先查找本机是否安装node  使用node -v  进行检查出现版本号即安装了 再检查本是否安装 npm 使用npm -v 进行检查,出现版本号即安装好了 安装vue-cli  使用npm install -g vue-cli  命令进行安装 安装好这一步,在创建一个项目 vue init  webpack my-project,这一步要一系列的y或者n进行对项目的一些简单配置 进入项目中使用cd my-project 进入项目 再npm install 一下 然后在npm run dev 或

webpack 4.x 从零开始初始化一个vue项目

创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index.html 安装webpack npm i -D webpack 创建配置文件 webpack.config.js 基础配置 entry 入口 module 模块 plugins 插件 output 输出 进阶配置 resolve devtool devServer ... 基础配置 先写好基本机构