原文--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. Linux命令学习总结：shutdown

    命令简介: 该命令可以安全关闭或者重新启动系统.你没有看错,shutdown命令不仅可以关闭系统.也可以重启Linux系统.   命令语法: /sbin/shutdown [-t sec] [-ark ...

  2. JavaSe：Cookie 管理的API介绍

    CookieManager 在使用HttpURLConnection中,并没有关于Cookie的管理.如果使用Java程序时,怎么管理cookie呢? Cookie案例 1. User Agent - ...

  3. Topshelf 创建windows服务注意事项

    其中项目应该是控制台应用程序 test.exe需要赋与管理员权限,右键属性可以定义. test.exe  install test.exe unstall

  4. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. android 拔打电话功能

    private void phoneCall(String num) { String phoneNum = "tel:" + num; Uri smsToUri = Uri.pa ...

  6. 深入理解java内存模型系列文章

    转载关于java内存模型的系列文章,写的非常好. 深入理解java内存模型(一)--基础 深入理解java内存模型(二)--重排序 深入理解java内存模型(三)--顺序一致性 深入理解java内存模 ...

  7. ​Si2151/41 6th Generation Silicon TV Tuner ICs

    ​ The Si2151/41 are the industry's most advanced silicon TV tuner ICs supporting all worldwide terre ...

  8. 【Windows编程】系列第八篇：通用对话框

    上一篇我们学习了菜单的基本编程,本篇来了解一下通用对话框的使用.Windows系统之所以是目前最流行的桌面系统,也是因为Windows有一套标准化,统一友好的交互界面,比如菜单.工具栏.状态栏以及各个 ...

  9. centos 7 install python spynner

    yum install python-devel yum install libXtst-devel pip install autopy pip install spynner import spy ...

  10. [Django]模型学习记录篇--基础

    模型学习记录篇,仅仅自己学习时做的记录!!! 实现模型变更的三个步骤: 修改你的模型(在models.py文件中). 运行python manage.py makemigrations ,为这些修改创 ...