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 控制反转)和 ...
随机推荐
- C#设计模式系列:开闭原则(Open Close Principle)
1.开闭原则简介 开闭原则对扩展开放,对修改关闭,开闭原则是面向对象设计中可复用设计的基石. 2.开闭原则的实现 实现开闭原则的关键就在于抽象,把系统的所有可能的行为抽象成一个抽象底层,这个抽象底层规 ...
- OpenCASCADE View Manipulator
OpenCASCADE View Manipulator eryar@163.com Abstract. When you finish modeling objects in the scene, ...
- 传智播客--ADO.net--SqlBulkCopy批量插入数据(小白必知)
一般情况下,我们在向数据库中插入数据时用Insert语句,但是当数据量很大的时候,这种情况就比较缓慢了,这个时候就需要SqlBulkCopy这个类. SqlBulkCopy本身常用的函数有这么几个 D ...
- 优化javaScript代码,提高执行效率
今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...
- 如何从源码中学习javascript
艾伦说啊,学习javascript,必须要学会看源码,通过高手的源码,你可以从中吸取很多书本上难以看到的技巧. 看源码就好像喝鸡汤,所有的营养都在这汤里了.这汤就是源码,高手写的源码,就是最好的鸡汤. ...
- [c++] constexpr and literal class
稀奇古怪的新特性,菜鸟在此啄上一啄. 1. When should literal classes be used in C++? 2. int i; // not constant const ...
- spring websocket源码分析续Handler的使用
1. handler的定义 spring websocket支持的消息有以下几种: 对消息的处理就使用了Handler模式,抽象handler类AbstractWebSocketHandler.jav ...
- 设置SharePoint Server 2013 的匿名访问
默认情况下,SharePoint Server 2013 是关闭匿名访问的,但是某些环境下我们又需要将这个匿名访问对全员开放,怎么操作更加安全与便捷,对于一个崭新的环境我们可以这样操作. 首先在当前需 ...
- mouseenter以及mouseleave兼容性
在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件.有时候,我们需要使用 mouseenter事件来防止子元素的冒泡,这就涉及到事件 ...
- ACM-东北大学程序设计竞赛-网络赛(2016.04.16)
Problem: A Time limit: 1s Mem limit: 64 MB AC/Submission: 0/0 Discuss Back Ranklist Stat ...