我最近想看看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. .Net多线程编程—误用点分析

    1 共享变量问题 错误写法: 所有的任务可能会共享同一个变量,所以输出结果可能会一样. public static void Error() { ;i<;i++) { Task.Run(() = ...

  2. 【G】开源的分布式部署解决方案（二） - 好项目是从烂项目基础上重构出来的

    分析目前项目结构 眼前出现这么一坨坨的文件夹,相信很多人已经看不下去了.是的,首先就是要把它给做掉. 按照这个项目文件夹的命名意图,大概可以划分如下: 1.Business:业务代码 2.Data:数 ...

  3. 关于ionic开发的一些总结（项目启动设置，app图标名称更改）

    1.更改包名称 一般项目刚生成时,ionic会根据项目名称自动给你生成一个包名.要修改包名的话,在根目录的config配置文件中,<widget id="x.x.x"换成自己 ...

  4. window nfs 服务端配置安装

    windows7下面安装nfs客户端命令(首先开启windows客户端mount挂载命令): 打开或关闭windows功能>nfs服务(勾选上)重启   windows nfs共享有两种方式分别 ...

  5. 【前端】:css

    前言: 关于前端的第二篇博客,会写关于css的,内容比较基础.写完这篇博客,会做一个类似美乐乐家具的界面.good luck to me~ 一.css-引用样式 标签上设置style属性: <b ...

  6. UINavigationController实现全屏滑动返回功能

    说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...

  7. 开放才能进步！Angular和Wijmo一起走过的日子

    Angular 已成为广受欢迎的前端框架.去年9月份,期待已久的 Angular2 的正式版发布之后,Angular 又迎来了新一轮热潮.伴随着 Angular 这一路走来,Wijmo 一直都是第一个 ...

  8. 读书笔记 effective c++ Item 13 用对象来管理资源

    1.不要手动释放从函数返回的堆资源 假设你正在处理一个模拟Investment的程序库,不同的Investmetn类型从Investment基类继承而来, class Investment { ... ...

  9. MySQL日志系统

    body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...

  10. SwaggerUI ASP.Net WebAPI2

    目前在用ASP.NET的 WebAPI2来做后台接口开发,在与前台做测试的时候,总是需要发送一个demo给他,但是这样很麻烦的,他还有可能记不住. 然后就想到SwaggerUI 生成测试文档. 话不多 ...