首先我们为啥要用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("你好陌生人!")

然后在刚刚运行台中输入

就好

然后就可以看到

这说明已经打包完成了。

2、处理css的loader

   npm install --save-dev style-loader css-loader  sass-loader node-sass

1、首先安装这些包 npm一次性安装多个依赖模块,模块之间用空格隔开

  npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

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

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

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  2. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  3. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

  4. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

  5. 用Vue创建一个新的项目

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大 ...

  6. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  7. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  8. java web(一) 使用sql标签库+tomcat+mysql手动创建一个jsp练习总结

    2016-09-0111:06:53                                     使用sql标签库+tomcat+mysql手动创建一个jsp 1. 1.1安装tomcat ...

  9. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

随机推荐

  1. git创建与管理远程分支【转】

    本文转载自:http://blog.chinaunix.net/uid-9398085-id-3164754.html git创建与管理远程分支 1.远程分支就是本地分支push到服务器上的时候产生的 ...

  2. mysql密码过期的修改方法(your password has expired)

    今天打开SQLyog提示密码过期:Your password has expired 解决方法:    1.  启动MySQL服务 2.  启动MySQL后台 3.  执行以下命令 step 1: S ...

  3. wordpress汇总(持续更新)

    在wordpress上新建编辑了几个页面,总是不能正常发布预览.经调查是由于固定链接的设置有问题导致的.打开左侧栏目“设置”中的固定链接项,可以看到目前所选的是“自定义结构”型.将其更改为“朴素”型后 ...

  4. static修饰类的作用

    Java里面static一般用来修饰成员变量或函数.但有一种特殊用法是用static修饰内部类,普通类是不允许声明为静态的,只有内部类才可以.被static修饰的内部类可以直接作为一个普通类来使用,而 ...

  5. Gym:101630J - Journey from Petersburg to Moscow(最短路)

    题意:求1到N的最短路,最短路的定义为路径上最大的K条边. 思路:对于每种边权,假设为X,它是第K大,那么小于X的变为0,大于K的,边权-X.然后求最短路,用dis[N]+K*X更新答案. 而小于K的 ...

  6. bzoj 1369: Gem 树形dp

    题目大意 给出一棵树,要求你为树上的结点标上权值,权值可以是任意的正整数 唯一的限制条件是相临的两个结点不能标上相同的权值,要求一种方案,使得整棵树的总价值最小.N<=10000 题解 我们可以 ...

  7. ContextMenu的自定义

    1.针对整个ContextMenu, 自定义一个Style,去掉竖分割线       <Style x:Key="DataGridColumnsHeaderContextMenuSty ...

  8. websocket之二:WebSocket编程入门

    一.WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...

  9. @SpringBootApplication注解分析

    首先我们分析的就是入口类Application的启动注解@SpringBootApplication,进入源码: @Target(ElementType.TYPE) @Retention(Retent ...

  10. LMV实验

    在CentOS6.8上创建过程如下: #对需要创建lvm的卷进行磁盘分区[root@www ~13:40:48]#fdisk /dev/sde Device contains neither a va ...