原文--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. GCD定时器

    // // ViewController.m // GCD 定时器 // // #import "ViewController.h" NSInteger count = ; @in ...

  2. android 性能分析案例

    本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...

  3. ORACLE字符集基础知识

    概念描叙    ORACLE数据库有国家字符集(national character set)与数据库字符集(database character set)之分.两者都是在创建数据库时需要设置的.国家 ...

  4. Linux查看系统开机时间

    有时候需要查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然停机,需要查看Linux开机时间/重启时间:  下面总结一些查看Linux开机关机时间的方法(非 ...

  5. ubuntu su sudo sudo–i 区别

    sudo : 暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码.不过有时间限制,Ubuntu默认为一次时长15分钟. su : 切换到某某用户模式, ...

  6. Windows7开机登录界面背景图修改

    首先,准备一张文件大小不超过250K的.jpg格式图片,文件名为:BackgroundDefault,图片分辨率建议与屏幕分辨率一致,因为这张背景无法像壁纸一样拉伸或者填充的. 打开这个路径,[C:\ ...

  7. 全透明Activity

    第一步:在/res/values/styles里面添加如下代码: <style name="translucent"> <item name="andr ...

  8. windows 2003自动登录的具体步骤

    在win2003系统中,使用最多的可能就是远程操作了,关于远程操作的那些事很多用户还是有些迷茫的.如果win2003系统远程重启后,要重新登录系统十分的麻烦,如何才能实现重启后的自动登录呢?让高手告诉 ...

  9. Entity Framework 6 with MySql

        MySQL Connector/Net 6.8.x MySQL Server 5.1 or above Entity Framework 6 assemblies .NET Framework ...

  10. Workerman-文件监控-牛刀小试

    今天学习了workerman , 初次体验了定时器的效果,结合文档.弄了个文件监控. 好了 废话不多说 直接上代码 use Workerman\Worker; require_once __DIR__ ...