一、介绍

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. beauty

    至你我最美的邂逅 年意渐渐消失,一转眼元宵的炮竹将要响起,今天是贰零一七年二月九号,即是元宵节前两天,在这里我写下我这几天的收获. 离元宵节还有四天,我好久都没跟朋友一起认真的玩过,几天我去了我发小的 ...

  2. [.net 面向对象程序设计深入]（14）Redis——基础

    [.net 面向对象程序设计深入](14)Redis——基础 很长一段时间没更新博客了,坚持做一件事,真不是件容易的事,后面我会继续尽可能的花时间更新完这个系列文章. 因这个系列的文章涉及的范围太大了 ...

  3. Struts2学习笔记②

    之前在跟着老师们做项目的时候经常会烦恼Struts.xml怎么配置,老师也没讲太清楚,都是说很简单,但是不懂的人就是太难了!哈哈,万事还是要靠自己的! struts.xml今天又看了几个小时的书,也跟 ...

  4. 单源最短路径问题之dijkstra算法

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. 算法的原理 以源点开始,以源点相连的顶点作为向外延伸的顶点,在所有这些向外延伸的顶 ...

  5. DotNet友元程序集解析

    项目开发的过程中,调试使用的可能是最多的操作.任何代码写出来都需要经过调试和整合,以此扩展和提升程序的稳定性和可靠性.谈到.NET的单元测试,在这里就得提提.NET的友元程序集这一特性,也借用.NET ...

  6. ServletConfig使用

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  7. 清理浏览器网站缓存的几种方法（meta,form表单，ajax）

    1.meta方法   HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...

  8. android添加权限--eclipse

    首先进入清单文件 2.点击下面的permissions----Add 3.选择Uses permission-----OK 4.选择需要的权限 5.查看代码,,已经添加完毕

  9. 菜鸟Scrum敏捷实践系列（三）用户故事的组织---功能架构的规划

    菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 采用Sc ...

  10. 安装node配置环境变量，解决某组件（如cordova，webpack等）“不是内部命令”问题

    安装cordova之后,控制台输入cordova -v之后,一直提示不是内部命令,查了很久入了很多坑之后,终于配置正确~记录一下~ 1.安装node,我的安装路径为D:\frontend\nodejs ...