原文--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. android 音乐播放器

    本章以音乐播放器为载体,介绍android开发中,通知模式Notification应用.主要涉及知识点Notification,seekbar,service. 1.功能需求 完善音乐播放器 有播放列 ...

  2. CocoaPods升级安装三方库报错

    CocoaPods升级后(最新版本1.0.1),安装第三方库的时候会报如下错误: The dependency `AFNetworking (~> 3.1.0)` is not used in ...

  3. (三)Maven仓库介绍与本地仓库配置

    1.Maven本地仓库/远程仓库的基本介绍 示意图: 本地仓库是指存在于我们本机的仓库,在我们加入依赖时候,首先会跑到我们的本地仓库去找,如果找不到则会跑到远程仓库中去找.对于依赖的包大家可以从这个地 ...

  4. ios手势操作,四个基本事件与六个常用事件

    基本事件包括begin,canceled,move,ended四项,如果对象的hidden属性为yes,则无效果,hidden属性必须为no;才能使用: -(void)touchesBegan:(NS ...

  5. js中的运算总结(未完待续

    [74由几个1几个5几个10几个20组成] var num = 74; for(one = 0; one <= num; one++){ for(five = 0; five <= num ...

  6. [MySQL] Buffer Pool Adaptive Flush

    Buffer Pool Adaptive Flush 在MySQL的帮助文档中Tuning InnoDB Buffer Pool Flushing提到, innodb_adaptive_flushin ...

  7. 《java JDK7 学习笔记》之接口与多态

    1.对于"定义行为"也就是接口,可以使用interface关键字定义,接口中的方法不能操作,直接标示为abstract,而且一定是public修饰的. 类要操作接口,必须使用imp ...

  8. linux

    托瓦兹跟BBS上面一堆工秳师一样, 他发现Minix虽然真癿很棒,但是谭宁邦教授就是丌愿意迚行功能癿加强,导致一堆工秳师在操作系统功能上面癿欲求丌满! 这个时候年轻癿托瓦兹就想:『既然如此,那我何丌自 ...

  9. 使用Ecplise git commit时出现"There are no stages files"

    异常   解决方案 进入Window--Preferences--Team--Git--Committing,反选下图红圈部分:   保存后即可出线我们熟悉的提交代码界面啦:

  10. 原生js实现jquery库中选择器的功能(jquery库封装一)

    今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...