原文--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. iOS NSString中的搜索方法rangeOfString

    NSString *str = @"your://aaa?backscheme=my"; //在str中查找“backscheme=”,并返回一个NSRange类型的值,我们可以通 ...

  2. Oracle如何实现创建数据库、备份数据库及数据导出导入的一条龙操作

    Oracle中对数据对象和数据的管理,无疑都是使用PL/SQL Developer来进行管理,该工具也提供给我们很多方便.快捷的操作,使得我们不再为Oracle本身丑陋.难用的UI而抱怨.由于我们一般 ...

  3. ORACLE OLAP错误ORA-06512: at "SYS.OLAPIHISTORYRETENTION"

    刚刚安装了ORACLE 10g R2后,启动数据库时发现告警日志有如下错误: Database Characterset is UTF8 replication_dependency_tracking ...

  4. DDD实施经验分享—价值导向、从上往下进行（圈内第一个吃螃蟹DDD实施方案）

    阅读目录: 1.背景 2.从业务开始 3.从战略到战术 4.借助外力推动研发(QA.领导.自动化测试) 5.领域模型与SAAS平台的内核(价值最大化) 6.最后 1.背景 DDD本身的技术就不介绍了, ...

  5. .NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项（自定义元数据提供程序）

    阅读目录: 1.需求背景介绍(Model元数据设置项应该与View绑定而非ViewModel) 1.1.确定问题域范围(可以使用DSL管理问题域前提是锁定领域模型) 2.迁移ViewModel设置到外 ...

  6. Fedora 23安装配置mysql数据库，修改初始密码及登陆

    下载MySQL5.7.9 yum仓库 wget http://dev.mysql.com/get/mysql57-community-release-fc23-7-noarch.rpm rpm -iv ...

  7. C#基础-事件 继承类无法直接引发基类的事件

    An event can be raised only from the declaration space in which it is declared. Therefore, a class c ...

  8. C#创建委托实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace MyDe ...

  9. hibernate中HQL练习时候一个小小的错误导致语法异常

    package cn.db.po.test; import java.util.List; import cn.db.po.User; import cn.db.po.biz.UserBiz; pub ...

  10. AC日记——寻找道路 洛谷 P2296

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...