一、介绍

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. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  2. Alamofire源码解读系列(四)之参数编码(ParameterEncoding)

    本篇讲解参数编码的内容 前言 我们在开发中发的每一个请求都是通过URLRequest来进行封装的,可以通过一个URL生成URLRequest.那么如果我有一个参数字典,这个参数字典又是如何从客户端传递 ...

  3. Java I/O之NIO Socket

    PS:本文简单介绍下旧I/O和NIO下的Socket通讯,仅以UDP来示例. TCP/IP协议 首先简单回顾下TCP/IP协议 Application:应用程序:Socket:套接字:Host:主机: ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. ios录音Demo

    <AudioToolbox/AudioToolbox.h> :这个库是C的接口,偏向于底层,主要用于在线流媒体的播放 <AVFoundation/AVFoundation.h> ...

  6. yaourt 之 Curl 错误

    最近执行 yaourt 更新时总是出现以下错误: curl error: Couldn't connect to server 无法进行更新.把配置中的下载工具更换了成 axel 等其它下载工具,还是 ...

  7. ３－１5　JS基础知识02

    一.For循环: For (var i = 0;  i <= 10;  i++){ 循环体: } 注意:For循环中的表达式是可以省略的,省略以后是个死循环. odd:奇数   even : 偶 ...

  8. javaList容器中容易忽略的知识点

    在集合类框架中,List是使用比较多的一种 List |---Arraylist 内部维护的是一个数组,查找快增删慢 |---LinkedList 底层是链表,增删快查询慢. |---Vctor线程安 ...

  9. 关于Trie KMP AC自动机

    个人认为trie,KMP,AC自动机是思想非常明确的,AC自动机的性质是与KMP算法的思想类似的(失配后跳转) 而KMP是线性的,AC自动机是在tire树上跑KMP,为方便那些不会用指针的小朋友(我也 ...

  10. 更改服务器的SID 加入域控制器提示SID重复

    启动Windows2008.2012进入系统后,打开“CMD窗口”并进入到"C:\windows\system32\sysprep"目录后再输入“sysprep /generali ...