我最近想看看wabpack,然后就面临着安装的问题,说实话,我一点也不懂cmd,怎么还需要用cmd安装呢。其实看教程上说可以在npm上安装,但是我打开npm总是出现闪退,所以我就选择了cmd

安装的过程,首先我们需要下载node.js,因为现在6以上的版本,都包括了npm,连带npm就一起下载了。

下载完之后,我就打开了cmd 首先验证node安装上了吗,代码如下

1)然后

3)上面的安装上了。下面我们就开始运行打包了,

  首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js

<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

  

// entry.js
document.write('It works.')

  将这2个文件放在新建的webpack文件中,然后编译 entry.js 并打包到 bundle.js:

4)在cmd中继续输入

webpack entry.js bundle.js

5)打包过程会显示日志:

6)这就成功了,然后在webpack文件里面就可以看到文件bundle.js了。  

 

webpack 安装流程的更多相关文章

  1. node,npm,webpack,vue-cli模块化编程安装流程

    首先什么都不要管,先装环境. pip是万能的!!! 安装node: pip3 install node 安装npm:   pip3 install npm 安装webpack: npm install ...

  2. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

  3. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  4. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  5. iOS 最新版 CocoaPods 的安装流程

    iOS 最新版 CocoaPods 的安装流程1.移除现有Ruby默认源$gem sources --remove https://rubygems.org/2.使用新的源$gem sources - ...

  6. 最新版 CocoaPods 的安装流程

                                       iOS 最新版 CocoaPods 的安装流程     1.移除现有Ruby默认源 $gem sources --remove h ...

  7. CocoaPods安装流程

    iOS 最新版 CocoaPods 的安装流程       1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/   2.使用新的源 $g ...

  8. CentOS 7 64位的安装流程

    若出现以下不支持虚拟机的问题: 表示虚拟机检测到CPU支不支持虚拟化,要去BIOS里设置虚拟化技术设置为enabled:重启电脑-按"F1或Fn+F1"-进入BIOS主界面-移至S ...

  9. 细说 webpack 之流程篇

    摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...

随机推荐

  1. js json和字符串的互转

    json与字符串的互转:    下面格式两种只是针对引号有稍微的区别 var result = JSON.parse("{\"a\":\"擦擦\",\ ...

  2. android: activity切换之效果

    Activity是android应用的重要部分;为了提高用户的体验度,加了Activity之间切换的动画效果,现在介绍的一种切换动画: 是什么效果,大家自已动手测试一下便知道: 先看进入的动画: pa ...

  3. Git学习之路(2)-安装GIt和创建版本库

    ▓▓▓▓▓▓ 大致介绍 前面一片博客介绍了Git到底是什么东西,如果有不明白的可以移步 Git学习之路(1)-Git简介 ,这篇博客主要讲解在Windows上安装Git和创建一个版本库 ▓▓▓▓▓▓ ...

  4. 我的Java笔记

    第一章 一 计算机程序:一系列有序的指令集合. 二 java语言分为三个领域 javaSE java技术核心(桌面应用程序)qq 百度云 javaEE 企业版(面向internet的应用程序)京东 淘 ...

  5. ZLG_GUI和3D显示的移植

    最近学习NRF51822,想在OLED上移植个强大的GUI ,本来想学习emWIN的,甚至想直接学习自带GUI的嵌入式操作系统RTThread,但是......哎,太懒了.....现在觉得ZLG_GU ...

  6. jQuery.sort对DOM元素进行排序

    实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...

  7. chrome浏览器360浏览器图片无法加载提示等待可用套接字问题

    前端时间遇到chrome,360浏览器无法加载图片问题,提示等待可用的套接字 后来发现原因,原来是使用html5<video>标签时使用了默认的配置,默认情况下<video>标 ...

  8. python之列表对象

    1. 获取列表中的某个值 描述:获取下标所对应的值 语法: print(li[0]) #[取索引值] 样例: li = list(['a','b','c']) val=(li[0]) #获取下标所对应 ...

  9. 基于 GCDAsyncSocket,简单实现类似《你猜我画》的 socket 数据传输

    一.前言 Socket Socket 是对 TCP/IP 协议的封装,其中IP协议对应为网络层,TCP 协议对应为传输层,而我们常用的HTTP协议,是位于应用层,在七层模型中HTTP协议是基于 TCP ...

  10. [Hadoop] - 异常Cannot obtain block length for LocatedBlock

    在Flume NG+hadoop的开发中,运行mapreduce的时候出现异常Error: java.io.IOException: Cannot obtain block length for Lo ...