原文--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. openfire安装

    服务器第一次能够开启,但不久就断开,再连接就会闪退,命令行更改Java路径后即可 http://www.jianshu.com/p/5d88fe201c71 开启服务器后,导入数据库脚本,创建几个测试 ...

  2. Watir-WebDriver关于交互式等待方法，告别一味sleep时代

    有交互就有等待,等待页面加载完毕的时间怎么处理呢? 有人说sleep: sleep N #等待N秒后继续执行 怎么才能告别毫无意义的命令呢? 接下来介绍一下Watir-Webdriver为我们提供等待 ...

  3. 移动端rem布局实践

      一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...

  4. HDFS --访问

    Hdfs的访问方式有两种,第一:类似linux命令,hadoop shell.第二:java API方式. 先看第一种. FS Shell cat chgrp chmod chown copyFrom ...

  5. RMAN备份失败: ORA-19502 & ORA-27072: File I/O error

    早上检查一ORACLE数据库的RMAN备份的邮件时,发现出现了ORA-27072: File I/O error等错误,具体信息如下所示: channel ORA_DISK_1: starting p ...

  6. Ignite 配置更新Oracle JDBC Drive

           如果使用Oracle 12C 作为Ignite 的Repository的话,在Repository Createion Wizard的配置过程中,会出现ORA-28040:No matc ...

  7. 交叉编译总结 libosscore.a libcurl.a libmysqlclient.a

    把工程文件交叉编译到arm上运行,着实花费了一番功夫. 首先遇到的错误是 X uses VFP register arguments, B does not 百度了一下,发现是硬浮点和软浮点的问题,原 ...

  8. 修改 EF的默认连接工厂为 Sql Server 而不是LocalDb

      当你用EF6创建一个新项目,不知你是否注意到默认的连接字符串使用了LocalDb而不是SQLServer.但你如果想把默认连接改用SQLSErver而不是LocalDb.这个其实很简单:只需修改下 ...

  9. UVA - 10375 Choose and divide[唯一分解定理]

    UVA - 10375 Choose and divide Choose and divide Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  10. java 经典程序 100 例

    1,编写程序,判断给定的某个年份是否是闰年.闰年的判断规则如下:( 1)若某个年份能被 4 整除但不能被 100 整除,则是闰年.( 2)若某个年份能被 400 整除,则也是闰年. import ja ...