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。

w1.zip

Webpack2学习记录-1的更多相关文章

  1. Webpack2学习记录-2

    这篇在 webpack-demo 目前下新建一个 w2 目录,学习 webpack.config.js 及 与 npm scripts 的使用. 1.w2 下新建一个 webpack.config.j ...

  2. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  3. Java 静态内部类与非静态内部类 学习记录.

    目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...

  4. Apache Shiro 学习记录4

    今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...

  5. UWP学习记录12-应用到应用的通信

    UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...

  6. UWP学习记录11-设计和UI

    UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...

  7. UWP学习记录10-设计和UI之控件和模式7

    UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...

  8. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  9. UWP学习记录8-设计和UI之控件和模式5

    UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...

随机推荐

  1. [2017-8-02]Android Learning Day9

    Layout动画效果 为布局添加简单的动画效果 public class MainActivity extends AppCompatActivity { @Override protected vo ...

  2. Spring乱码问题解决方案

    请求乱码 GET请求乱码: 原因:请求参数带在url地址上.url地址什么时候解析? tomcat收到请求对url进行编解码(ISO8859-1) 解决方案:在tomcat的8080端口配置出加上 U ...

  3. c# WebApi之身份验证：Basic基础认证

    为什么需要身份认证 身份认证是为了提高接口访问的安全性,如果没有身份验证,那么任何匿名用户只要知道服务器的url,就可以随意访问服务器,从而访问或者操作数据库,这会是很恐怖的事. 什么是Basic基础 ...

  4. JavaScript FormData的详细介绍及使用

    本文转自:https://blog.csdn.net/liupeifeng3514/article/details/78988001 FormData的详细介绍及使用请点击此处,那里对FormData ...

  5. django 配置media 存放调用 图片、图标等文件

    一.需求分析: 一般在网站开发中,有很多类似于用户头像.用户上传的文件,这些经常要改变的媒体文件,需要有一个地方存放,于是就需要media目录,起到跟static类似的功能. 二.在settings. ...

  6. 第三十八篇-logcat的使用

    很多時候,程序有问题时都需要debug,一般会设置几个信息点,查看程序是否运行,之前学过Toast,可以广播,但是终归是不太方便,今天学习一下logcat的用法. logcat里面是一些日志,内容太多 ...

  7. MYSQL二进制5.7.安装

    一.下载MySQL二进制软件包 下载连接:MYSQ安装包下载 官网MySQL有四个版本:GA版.DMR版.RC版.Beta版.一般生产和测试环境使用GA版(常规可用的版本,经过bug修复测试) 二.安 ...

  8. 使用trash-cli防止rm -rf 误删除带来的灾难（“事前”非“事后”）

    trash-cli是一个使用 python 开发的软件包,包含 trash-put.restore-trash.trash-list.trash-empty.trash-rm等命令,我们可以通过这写命 ...

  9. Object的数据属性和访问器属性

    一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性包含四个特性,分别是: configurable:表示能否通过delete删除属性从而重新定义属性,能否 ...

  10. 全角的空格(A1A1)惹的祸！

    #先上干货 “A1A1”是指全角的空格(GBK码): #验证 由上图可以看出半角的空格的HEX为"20": 由上图可以看出,在ANSI格式编码的文件中输入的全角的空格,转换为HEX ...