一、介绍

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#集合的应用以及和数组比较，它的好处有哪些

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...

  2. jquery 的基础知识，以及和Javascript的区别

    想到之前所学的javascript 我们会想到这几个方面:找元素: 操作内容: 操作属性:操作样式:统一操作元素: jquery 也是从这几个方面来学习的. <head> <meta ...

  3. Selenium 使用Eclipse+TestNG创建一个Project中遇到的问题

    继续之前的学习,对于一个没有太多计算机基础的人,刚学习selenium,最大的问题就是不知道该如何入手,最简单的办法就是录制脚本之后导入. 但是导入的时候也会出现一些问题,就是该导入到哪里?如何导入? ...

  4. Gradle之恋－任务2

    由于任务作为Gradle的核心功能模块,多花点精力是值得的,本文继上一篇主要涉及到:任务的执行顺序.为任务添加组和描述.跳过任务.扩展任务属性.定义默认任务. 任务顺序 如果构建(build)不能在清 ...

  5. C++ IO学习

    关于IO,主要有这么三种类型:标准输入输出,文件输入输出,字符串流.后面两种都是继承自第一种标准输入输出的.他们分别对应的头文件是: 标准输入输出:#include <iostream> ...

  6. PHP数据访问增删查（20161028）

    注:预定义数组   $_POST[ ]; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. 设置border属性变化不同形状：三角形、圆形、弧形 2017-03-20

    一.通过设置边框----正方形.三角形 <style> .c{ height: 0px; width: 0px; border-top: 50px solid red; border-ri ...

  8. springmvc框架原理

    1.  用户发送请求至前端控制器DispatcherServlet 2.  DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3.  处理器映射器根据请求url ...

  9. 关于php的flush在本机正常在服务器不灵的问题

    这个问题网上很多,我就不重复那些了. 我的是关于进度条的应用.我最后遇到的问题是,在本机swampserver环境下的输出缓存很快,但是到了服务器上就是一段一段的了.我的服务器是Web服务器是IIS. ...

  10. java 文件操作（二）---Files和Path

    自从java 7以来,引入了FIles类和Path接口.他们两封装了用户对文件的所有可能的操作,相比于java 1的File类来说,使用起来方便很多.但是其实一些本质的操作还是很类似的.主要需要知道的 ...