本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是列举的示例太深奥,一时无法理解),入了很多的坑,建议还是从技术文档看起,里面的例子都是相对简单易懂的,链接:http://webpackdoc.com/install.html

至于什么是webpack,网上有很多文章都有详细的解释:http://www.cnblogs.com/vajoy/p/4650467.html

下面就详细的写下学习webpack的体会与心得(本人是webpack新手,有什么写的不对的地方,望各位前辈多多提出指正)

一:安装配置

首先要安装 Node.js, Node.js 自带了软件包管理器 npm,npm是一个很强大的功能,安装编译webpack,glup等都需要用到它。

用 npm 安装 Webpack:

在cmd命令行输入:

npm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。

接下来的步骤文档中是这样写的:

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

# 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

文档中的步骤说得挺详细的,看过很多技术博客,有很多都在这一步骤说明得不是很详细,容易误导新手(本人就因此入了不少的坑)。

这里我在这里解释下:

1.进入项目目录:

前提是你创建了自己的项目文件夹,如在D盘创建了一个webpackdemo文件作为自己的项目文件夹。如何进入项目呢?着还是靠cdm命令行来进行,如上创建一个文件夹,你的项目文件目录是:D/webpackdemo,那么需要在cmd中通过命令行找到项目目录。运行cmd,输入:"d:"回车,这样就进入了你手中的电脑D盘目录,再输入"cd webpackdemo",回车就找到了刚创建的项目目录。一切都是以项目目录为基石,编译打包项目代码的。

未完待续......

webpack初体验的更多相关文章

  1. webpack初体验_集成插件_集成loader

    webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...

  2. Webpack 2 视频教程 004 - Webpack 初体验

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  3. webpack初体验之模块化开发

    写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...

  4. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  5. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  6. Vue-cli的打包初体验

    前言:我司是一个教育公司,最近要做一个入学诊断的项目,领导让我开始搭建一套基于vue的H5的开发环境.在网上搜集很多的适配方案,最终还是选定flexible方案.选择它的原因很简单: 它的github ...

  7. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  8. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  9. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

随机推荐

  1. C#设计模式系列:备忘录模式(Memento)

    1.备忘录模式简介 1.1>.定义 备忘录模式在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将该对象恢复到原先保存的状态. 1.2>.使用频率 ...

  2. 模拟jsonp的实现

    function prescript(s) { if (s.cache === undefined) { s.cache = false; } if (s.crossDomain) { s.type ...

  3. 【转】批量复制操作(SqlBulkCopy)的出错处理:事务提交、回滚

    原文地址:http://blog.csdn.net/westsource/article/details/6658109 默认情况下,批量复制操作作为独立的操作执行. 批量复制操作以非事务性方式发生, ...

  4. windows自带记事本导致文本文件(UTF-8编码)开头三个字符乱码问题

    在windows平台下,使用系统的记事本以UTF-8编码格式存储了一个文本文件,但是由于Microsoft开发记事本的团队使用了一个非常怪异的行为来保存UTF-8编码的文件,它们自作聪明地在每个文件开 ...

  5. Eclipse迁移到Android studio步骤如下:

    一.从Eclipse中导出:1.将你的ADT插件版本升级到22.0以上.2.在Eclipse中,选择File-->Export.3.在弹出的导出窗口中,打开Android的文件夹,选择“Gene ...

  6. Web APi之认证(Authentication)及授权(Authorization)【一】(十二)

    前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...

  7. # Hawk:开源贡献计划,设计,反思

    Hawk在发布之后,收到了不少朋友的感谢和使用反馈,沙漠君表示非常开心.软件肯定有很多的问题和不足,还有很多可扩展的空间,因此我希望更多的朋友,能够参与到改进Hawk的计划中来,为开源世界作出努力. ...

  8. EntityFramework 分页问题探讨之 OrderBy

    应用场景 最近被应用程序中页面加载慢的问题所折磨,看似容易的问题,其实并不容易(已经持续两天时间了),经过"侦查",发现了两个"嫌疑犯": EntityFram ...

  9. 重温Servlet学习笔记--session对象

    session的类型是属于HttpSession,HttpSession是由javaWeb提供的,用来会话跟踪的类.session是服务器端对象,保存在服务器端. HttpSession是servle ...

  10. 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...