Webpack2学习记录-1
1、安装前准备
安装 webpack 之前，需要安装 node，这时最新的是 6，npm 是 4。如果有老的 node 项目在跑建议安装下 nvm。
2、建议安装在局部，即在项目下的 node_modules 里
比如在 webpack_demo 目录下新建了一个 w1 项目，先用 npm init -y 命令生成一个 package.json 文件
接着执行 npm install webpack --save-dev 安装最新的 webpack
1分钟不到安装成功后，输入 ./node_modules/.bin/webpack -v 可以测试下
如果是全局安装，直接输入 webpack 即可
3、w1目录创建 app 目录及 index.js
index.js 内容如下
import _ from 'lodash';
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
4、index.js 用到了 lodash.js ，因此也需要安装下
5、w1目录下创建 index.html，内如如下
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
最后的 w1 的目录结构如下
6、index.html 中引入的是 dist/bundle.js ，这个 dist 目录即是 webpack 执行输出的
cd 到 w1 执行 ./node_module/.bin/webpack app/index.js dist/bundle.js
回到 w1，下面多出了一个 dist 目录和 bundle.js
7、打开 index.html，可以看到页面输出了 “Hello webpack”，至此完成。
8、index.js 中用到了 ES6 的 import，这个 webpack 默认支持，完整的 ES6 语法需要单独安装 babel。
Webpack2学习记录-1的更多相关文章
- Webpack2学习记录-2
这篇在 webpack-demo 目前下新建一个 w2 目录,学习 webpack.config.js 及 与 npm scripts 的使用. 1.w2 下新建一个 webpack.config.j ...
- Quartz 学习记录1
原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
- Java 静态内部类与非静态内部类 学习记录.
目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...
- Apache Shiro 学习记录4
今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...
- UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...
- UWP学习记录11-设计和UI
UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...
- UWP学习记录10-设计和UI之控件和模式7
UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...
- UWP学习记录9-设计和UI之控件和模式6
UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
随机推荐
- 分离式部署LNMP
-------Nginx----------PHP+NFS------------MySql------192.168.56.202 192.168.56.201 192.168.56.200安装My ...
- HDU 6336 Matrix from Arrays （杭电多校4E）
遇事不决先打表. 然后会发现(个屁)大的矩形是由一个2L*2L的矩形重复出现组成的然后我们就可以这个矩形分成四个点到(0, 0)点的矩形,这样问题就变成了求四个到顶点(0, 0)的矩形的面积,然后就先 ...
- Bomb HDU - 5934 （Tarjan）
#include<map> #include<set> #include<ctime> #include<cmath> #include<stac ...
- java ssl 使用不同的加密套件，对性能影响很大
一直以来都是使用java默认的[加密套件]来处理ssl请求,突然有一天我尝试显式的设置了一组加密套件后,发现图片显示的速度明显快了一倍左右. 经过使用几组不同的加密套件测试后,发现使用 TLS_ECD ...
- Elastic 安装篇（1）
1.Elasticsearch下载安装 https://www.elastic.co/cn/downloads/elasticsearch 解压: 2.安装head https://github.co ...
- maomao的每日动向
\(2019.02.04\) \(Nothing\) \(to\) \(do\). \(2019.02.05\) - 早上睡到\(12\)点 - 中午下午:吃饭串门拜年 - 晚上:吹爆<流浪地球 ...
- PHP三元运算符
:条件 ? 结果1 : 结果2 <?php$a=10; $b=20;$c=$a>$b?($a-$b):($a+$b);//说明:如果变量a大于变量b则执行问号后面的,否则就执行:冒 ...
- Vue.js 条件与循环
条件判断: v-if: 条件判断使用 v-if 指令: v-else-if:(其实和Java,c,js的语法差不多) v-show:
- Java多线程常用面试题(含答案,精心总结整理)
现在有T1.T2.T3三个线程,你怎样保证T2在T1执行完后执行,T3在T2执行完后执行? 目的是检测你对”join”方法是否熟悉.这个多线程问题比较简单,可以用join方法实现. 核心: threa ...
- 为什么要两次调用encodeURI来解决乱码问题
.encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.. UTF-8编码的格式:一个汉字来三个字节构成,每一个字节会转换成16进制的编码,同时添加上%号. 假设页面端输入的 ...