原文--http://webpack.github.io/docs/tutorials/getting-started/

什么是webpack？

webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。

1.怎么安转webpack

　　首先需要安装node.js，在命令行中输入：

$ npm install webpack -g

2.怎么使用webpack

　　1.从一个空的文件夹开始，首先创建：entry.js,然后输入：

document.write("It works.");

　　接着再添加一个html文件：

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>

</html>

　　在这之后，在命令行中运行：

$ webpack ./entry.js bundle.js

　　它将编译文件，并且会创建一个文件包。命令运行成功之后，显示：

Version: webpack 1.13.3

Time: 24ms

    Asset     Size  Chunks             Chunk Names

bundle.js  1.42 kB       0  [emitted]  main

chunk    {0} bundle.js (main) 28 bytes [rendered]

    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

　　在浏览器打开index.html，会看见  “It works.”。

　　2.创建第二个个文件content.js，添加内容：

module.exports = "It works from content.js.";

　　更新entry.js

- document.write("It works.");

+ document.write(require("./content.js"));

　　重新编译：

$ webpack ./entry.js bundle.js

　　刷新浏览器之后，回看到“It works from content.js.”。

　　webpack将分析接口文件依赖其他文件。这些文件(称为模块)都包含在bundle.js。

　　webpack会给每个模块一个惟一的id和保存所有模块访问bundle.js id的文件。只有输入模块是在启动时执行的。一个小的运行时提供了需要函数和在需要时执行的依赖关系。

　　3.添加css文件

　　webpack只能处理JavaScript本身,所以我们需要css-loader处理CSS文件。我们还需要style-loader CSS文件应用样式。
　　运行npm安装css-loader style-loader安装加载器。(他们需要安装在本地没有- g),这将为您创建一个node_modules文件夹,加载器将运行。

　　创建一个css文件，style.css

body {

    background: yellow;

}

　　然后更新entry.js：

+ require("!style!css!./style.css");

  document.write(require("./content.js"));

　　通过 “!style!css!” 这样的前缀，可以把文件进行一系列的转化，最终变成 javascript 的一个模块。

　　命令行绑定 loaders

　　如果我们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")

　　或者我们喜欢灵活定制 css 文件的转化方式。

　　修改 entry.js

//require("!style!css!./style.css");

require("./style.css");

document.write(require("./content.js"));

　　执行下面的命令：

 $ webpack ./entry.js bundle.js --module-bind "css=style\!css"

　　官网说明在这有个错误，css=style\!css 里面少了个反斜杠，原因是叹号在 bash 里有特殊意义

　　4.添加 webpack.config.js 

　　项目根目录下新建一个webpack.config.js ，然后通过一句命令$ webpack就能打包我们的项目。

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style!css" }

        ]

    }

};

　　在命令行，输入：

webpack

　　webpack 命令会尝试读取同目录中的 webpack.config.js 文件。你会看到：

Version: webpack 1.13.3

Time: 148ms

    Asset     Size  Chunks             Chunk Names

bundle.js  10.7 kB       0  [emitted]  main

chunk    {0} bundle.js (main) 8.85 kB [rendered]

    [0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built]

    [1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]

    [2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built]

    [3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]

    [4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]

    [5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]

　　如果项目增加编译可能需要一段时间。所以我们希望显示进度条。和我们想要的颜色…

webpack --progress --colors

　　我们不想在每次修改后手动编译…

webpack --progress --colors --watch

　　Webpack可以缓存不变的模块和输出文件编译。

　　当使用观看模式,观察者webpack安装文件的所有文件,编译过程中使用。如果发现任何改变,它会再次运行编译。启用高速缓存的时候,webpack保持在内存中每个模块并将重用它如果不是改变了。

　　5.开发服务器

　　这结合一个小express服务器在localhost:8080是静态资产以及包(自动编译)。结束时它会自动更新浏览器页面重新编译(SockJS)。打开http://localhost:8080 / webpack-dev-server /包在您的浏览器中。

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

Webpack--自学笔记的更多相关文章

  1. 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...

  2. 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...

  3. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

  4. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  5. python自学笔记

    python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...

  6. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

  7. ssh自学笔记

    Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...

  8. JavaScript高级程序设计之自学笔记（一）————Array类型

    以下为自学笔记. 一.Array类型 创建数组的基本方式有两种: 1.1第一种是使用Array构造函数(可省略new操作符). 1.2第二种是使用数组字面量表示法. 二.数组的访问 2.1访问方法 在 ...

  9. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  10. JS自学笔记05

    JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...

随机推荐

  1. initialize和init以及load方法的区别与使用以及什么时候调用

    initialize不是init initialize在这个类第一次被调用的时候比如[[class alloc]init]会调用一次initialize方法,不管创建多少次这个类,都只会调用一次这个方 ...

  2. 自定义 URL Scheme 完全指南(转载)

    iPhone / iOS SDK 最酷的特性之一就是应用将其自身”绑定”到一个自定义 URL scheme 上,该 scheme 用于从浏览器或其他应用中启动本应用. 注册自定义 URL Scheme ...

  3. (一)Maven初步了解与认识

    Apache Maven是一个软件项目管理的综合工具.基于项目对象模型(POM)的概念,提供了帮助管理构建.文档.报告.依赖.发布等方法,Maven简化和标准化项目建设过程.处理编译,分配,文档,团队 ...

  4. Linq专题之提高编码效率—— 第一篇 Aggregate方法

    我们知道linq是一个很古老的东西,大家也知道,自从用了linq,我们的foreach少了很多,但有一个现实就是我们在实际应用中使用到的却是屈指可数 的几个方法,这个系列我会带领大家看遍linq,好的 ...

  5. IIS不能下载ini文件

    1.打开IIS. 2.选择站点或者存放*.ini文件的目录,右键菜单中选择属性. 3.选择“HTTP头”选项卡. 4.点击“MINE类型”. 5.点击“新建”. 6.这是跳出一个对话框,在“扩展名”一 ...

  6. CentOS7 虚拟机搭建、初始设置、简单使用

    注:虚拟机安装的系统是CentOS7 1.网络设置 网络的设置主要是为了让虚拟机和物理机能够相互ping通,这样就可以用XShell之类的工具操控,也可以上网 见另一篇 CentOS7网络配置 2.物 ...

  7. Snapshot Instance 操作详解 - 每天5分钟玩转 OpenStack（36）

    本节我们通过日志详细讨论 instance 的 snapshot 操作. 有时候操作系统损坏得很严重,通过 Rescue 操作无法修复,那么我们就得考虑通过备份恢复了.当然前提是我们之前对instan ...

  8. 第一次在Django上编写静态网页

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...

  9. 摆脱jquery,用自己的JS库实现ajax功能

    可以将下面的代码保存在一个文件里如:myAjax.js,以后在项目中如果觉得jquery那一套很重,就完全可以使用自己的ajax库,不用担心性能和兼容性! /** * 创建ajax请求对象 * @re ...

  10. 疑似easyui本身bug：easyui时间控件问题，试了几个版本都不行

    最近发现easyui时间控件的值格式不支持带斜杠的日期(2016/10/31),必须是2016-10-31这类的才能正常使用,否则默认初始化为当前时间 <input id="Retur ...