一、介绍

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. 关于Xmanager使用问题的总结

    做大数据的人对Xmanager这类远程连接工具应该都不陌生,我在使用Xmanager时遇到了一些问题并经过google和亲测解决,写在这里与大家分享. 1. [问题描述] 在windows上使用Xma ...

  2. Jquery 客户端生成验证码

    验证码的作用: 1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简 ...

  3. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  4. 1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区（题解第一弹）

    1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit:  ...

  5. 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路

    1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 3 ...

  6. 有关rip路由协议相关知识以及实例配置【第1部分】

    有关rip路由协议相关知识以及实例配置[第一部分] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从 ...

  7. H5 Bgsound

    Bgsound ■ 摘要 项目 说明 形式 <bgsound src="..."> 支持 e2+ 标签省略 开始标签:必须,结束标签:无 ■ 说明 bgsound 是 ...

  8. Git-最简单的本地项目变成版本仓库，然后把内容推送到GitHub仓库

    (注:本文的前提是本地Git仓库和github仓库之间已经存在SSH key了,所以如果没有建立联系的小伙伴们请先建立联系) 具体操作: 一:把本地项目变成版本仓库 1.把本地的一个项目目录编程版本库 ...

  9. CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景

    在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...

  10. (6)简单说说java中的线程

    先甩出来两种创建线程的方法: private static int count = 100; public static void main(String[] args) { // 用继承Thread ...