webpack初体验
本人菜鸟一枚,最近一直在研究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初体验的更多相关文章
- webpack初体验_集成插件_集成loader
webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...
- Webpack 2 视频教程 004 - Webpack 初体验
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack初体验之模块化开发
写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- Vue-cli的打包初体验
前言:我司是一个教育公司,最近要做一个入学诊断的项目,领导让我开始搭建一套基于vue的H5的开发环境.在网上搜集很多的适配方案,最终还是选定flexible方案.选择它的原因很简单: 它的github ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
随机推荐
- HTML5应用缓存机制
首先先上一张图: 用360浏览器的用户对这张图应该都是耳熟能详了吧,没错,当网络不通畅时使用360浏览器,便会有这张图弹出来.为什么没有网络还能弹出这一副画面呢?这就关乎HTML5的应用缓存机制了. ...
- 《JS设计模式笔记》 4,桥接模式
//桥接模式的作用在于将实现部分和抽象部分分离开来,以便两者可以独立的变化. var singleton=function(fn){ var result; return function(){ re ...
- MVC实用架构设计(三)——EF-Code First(5):二级缓存
前言 今天我们来谈谈EF的缓存问题. 缓存对于一个系统来说至关重要,但是是EF到版本6了仍然没有见到有支持查询结果缓存机制的迹象.EF4开始会把查询语句编译成存储过程缓存在Sql Server中,据说 ...
- Android okHttp网络请求之Retrofit+Okhttp+RxJava组合
前言: 通过上面的学习,我们不难发现单纯使用okHttp来作为网络库还是多多少少有那么一点点不太方便,而且还需自己来管理接口,对于接口的使用的是哪种请求方式也不能一目了然,出于这个目的接下来学习一下R ...
- LVS+Keepalived搭建MyCAT高可用负载均衡集群
LVS+Keepalived 介绍 LVS LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国 ...
- 如何用Perl对Excel的数据进行提取并分析
巡检类工作经常会出具日报,最近在原有日报的基础上又新增了一个表的数据量统计日报,主要是针对数据库中使用较频繁,数据量又较大的31张表.该日报有两个sheet组成,第一个sheet是数据填写,第二个sh ...
- Oracle配置和使用闪回
环境:RHEL 6.4 + Oracle 11.2.0.4 目录: 一.闪回查询 1.1 闪回查询举例 1.2 闪回版本查询举例 二.闪回事物 2.1 闪回事物查询的先决条件 2.2 闪回事物查询 三 ...
- reactjs学习之路
正式开始react的学习 1.react中组件的首字母如果是大写就会当成自定义组件,如果是小写就会当成DOM的自带元素名.如果你自定义组件名称首字母是小写不会报错,但是无法显示. 2.自定义组件的re ...
- ThinkPHP学习(二)
开发规范 1.命名规范 使用ThinkPHP开发的过程中应该尽量遵循下列命名规范: 特例:在ThinkPHP里面,有一个函数命名的特例,就是单字母大写函数,这类函数通常是某些操作的快 捷定义,或者有特 ...
- jQuery-1.9.1源码分析系列(十) 事件系统——事件体系结构
又是一个重磅功能点. 在分析源码之前分析一下体系结构,有助于源码理解.实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了:而且jQuery事件系 ...