一、介绍

Webpack是德国开发者 Tobias Koppers 开发的模块加载器，它能把所有的资源文
件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都作为模块来使用和处理。

作为一个模块打包工具，主要功能是打包资源文件并整合到一个包中，我们在开发时，只需
要引用一个包文件，就能加载预先设计好的模块功能。

二、安装

不同文件类型的资源，Webpack有对应的模块loader，ES6语法转换用的是babel-loader，
dataUrl用的是url-loader，样式用的style、css-loader。
loader列表：http://webpack.github.io/docs/list-of-loaders.html

# 安装webpack

npm install webpack

# 使用babel、css、dataUrl模块

npm install style-loader css-loader url-loader babel-loader babel-preset-es2015

# 创建webpack.config.js文件

touch webpack.config.js

安装Webpack之后，可以使用webpack命令行工具，它默认读取当前目录下的webpack.config.js配置文件。

三、基本使用

webpack声明加载babel、style、css、url的loader之后会读取main.js所有模块，并把打包
后的结果输出到bundle.js文件中。

module.exports = {

  // 读取main.js文件中引用的所有模块

  entry: './main.js',

  // 执行打包后输出的文件

  output: {

    filename: 'bundle.js'

  },

  // 加载模块

  module: {

    loaders: [

      // 匹配所有js文件，用babel工具识别ES6代码转换成ES5

      { test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015']} },

      // 匹配所有css文件, 用style和css工具解析

      { test: /\.css$/, loader: 'style-loader!css-loader' },

      // 匹配所有png文件，解析成dataUrl格式

      { test: /\.(png|jpg)$/, loader: 'url-loader'} // inline base64 URLs for <=8k images, direct URLs for the rest

    ]

  }

};

创建五个资源文件，分别写入
1. main.js
2. js/console-01.js
3. js/console-02.js
4. css/index.css
5. images/3.jpg

// main.js - 加载模块

// --------------------------------------------

require('./js/console-01.js');

require('./js/console-02.js');

require('./css/index.css');

// 读取图片模块，并输出到body中

var img = document.createElement('img');

img.src = require('./images/react.jpg');

document.body.appendChild(img);

// --------------------------------------------

// JS - console-01.js

console.log('console 01');

// JS - ES6 - console-02.js

for (let i = 2; i <= 10; i++) {

  console.log('console 02');

}

// CSS样式模块

body {

  background: #ccc;

}

运行webpack命令，它会读取main.js文件，并把main.js依赖的模块进行打包处理，最终输出到bundle.js文件下。

# 运行webpack命令

webpack

# 输出结果

------------------------------------------------------

Hash: d9ca67a5753768b7c625

Version: webpack 1.12.11

Time: 52ms

Asset Size Chunks Chunk Names

bundle.js 24 kB 0 [emitted] main

+ 8 hidden modules

------------------------------------------------------

创建一个index.html文件，并引用bundle.js打开浏览器后

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script src="./bundle.js"></script>

</body>

</html>

bundle.js文件包含了 CSS样式加载、图片dataUrl、JS 的合并打包处理。

四、哪些项目用到Webpack
1. React（JSX）
2. Vue （.vue）
3. Ant Design （淘宝Ant全组件）

五、哪些项目适合用Webpack
1. 单页应用 SPA （Single Page Application）
2. 需要把资源文件整理成一个文件包的项目
3. 用到ES6和JSX项目
4. 可以考虑代替Gulp、Grunt等工具

参考资料：
http://webpack.github.io/
https://github.com/webpack
http://segmentfault.com/a/1190000002551952

Webpack模块加载器的更多相关文章

  1. Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  2. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  3. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  4. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  5. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  6. 【模块化编程】理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...

  7. webpack常用加载器和插件

    css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...

  8. JS模块加载器加载原理是怎么样的？

    路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的 ...

  9. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

随机推荐

  1. C#自动弹出窗口并定时自动关闭

    最近做个小项目,用到一个小功能:后台线程定时查询数据库,不符合条件的记录弹出消息提醒(在窗口最前面),并且过几秒钟再自动关闭弹出的窗口. 所以从网上找来资料,如下: WinForm 下实现一个自动关闭 ...

  2. ARZhu的数论初步

    数论 2017年3月4日02:11:35 gcd 1. 原理: gcd( a, b ) = gcd( b, a - b ) -> gcd( a, b ) = gcd( b, b % a ) 2. ...

  3. 关于使用微信js上传图片 笔记

    微信js初始化时需要签名,先获取签名(java代码): 1.获取jsapi_ticket,此数据自己保存,有效时长为7200秒 private String getJsticket(String to ...

  4. 第一章 初始java

    一.单词 public:公共的          static:静态的        void:空的          class:类       print:打印     line:排    pro ...

  5. 南京.NET技术行业落地分享交流会圆满成功

    3月11日,由南京.NET社区发起,纳龙科技赞助,并联合举办的,.NET技术线下交流活动,圆满成功. 这是南京.NET圈子第一次的小型聚会,为了办好此次活动,工作人员不敢怠慢.早早准备好了小奖品与水果 ...

  6. KoaHub平台基于Node.js开发的Koa的skip插件代码详情

    koahub-skip koahub skip middleware koahub skip Conditionally skip a middleware when a condition is m ...

  7. js页面跳转常用的几种方式

    第一种: <script language="javascript" type="text/javascript"> window.location ...

  8. canvas的使用

      1.概念 canvas一般就是用来绘制图像的     2.基本知识 上下文对象   var canvas = doucment.getElementById("canvas") ...

  9. 读learning spark lighting chapter1~chapter2

    chapter 1 introduction to the analysis with spark the conponents of Sparks spark core(contains the b ...

  10. Android开发遇到短信备份失败

    今天做了一个有关ContentProvider的短信备份的小案例,遇到短信备份失败,费了一番周折后终于找到了问题所在 该案例是将短信写到一个xml文件然后保存在手机存储中实现短信的备份功能,关键实现代 ...