Webpack模块加载器
一、介绍
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模块加载器的更多相关文章
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- 实现简单的 JS 模块加载器
实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- webpack常用加载器和插件
css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...
- JS模块加载器加载原理是怎么样的?
路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的 ...
- 构建服务端的AMD/CMD模块加载器
本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...
随机推荐
- 未来工厂——电器行业ERP案例
江苏科兴电器有限公司位于全国著名的“银杏之乡”泰兴市南首,主要生产35kV及以下电流.电压互感器等系列产品.产品多次经国家及省市技术监督部门抽检合格,广泛应用于国家重点工程.“COSINE”商标荣获泰 ...
- find、findIndex、indexOf、lastIndex、includes 数组五种查询条件方法介绍
find() 方法返回数组中满足提供的测试函数的第一个元素的值. 语法: arr.find(callback[, thisArg]) findIndex()方法返回数组中满足提供的测试函数的第一个元素 ...
- wxpython tab切换页面
最近没事学习下wxpython,发现很少有关于页面切换的demo,这边分享下2中切换的方法.第一种:利用wx.Notebook第二种:利用Sizer布局实现(自己写的),代码没有涉及到什么重构之类的优 ...
- MySQL+SSM+Ajax上传图片问题
第一次写上传图片的代码,碰到很多问题.昨天做了整整一天,终于在晚上的时候成功了.大声欢呼. 但是,做完之后,还是有很多问题想不通.所以在这里也算是写个笔记,日后忘记了可以回顾,也算请教各路朋友.(^_ ...
- 帝国CMS万能标签的使用
标签名称: 带模板的信息调用标签[万能标签] [ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,标签模板ID,只显示有标题图片[/ecmsinfo] 说明:e ...
- centos6.7编译安装mysql5.7.17
centos6.7编译安装mysql5.7.17 2017-03-24 09:57:15 提示:mysql5.7.17和之前5.56以前的版本安装不一样,需要用cmake 另外,看本文档的mysql编 ...
- 阿里安卓面试分析: Android应用的闪退(crash)问题跟踪和解析
一:问题描述 闪退(Crash)是客户端程序在运行时遭遇无法处理的异常或错误时而退出应用程序的表现,请从crash发生的原因分类与解决方法.在出现crash后如何捕捉并分析异常这两个问题给出自己 ...
- java学习笔记 --- 异常
异常 (1)程序出现的不正常的情况. (2)异常的体系 Throwable |--Error 错误,严重问题,我们不处理. · |--Exception 异常 |--R ...
- CentOS 中 YUM 安装桌面环境(转)
使用 yum groupinstall 指令很容易就能安装上图形界面的桌面系统. 1. yum 的 group 指令 yum 可以以程序组的模式来安装成套的软件包.支持的软件包可以通过, # yum ...
- for语句输出三角形
public class yuju { public static void main(String[] args) { ; i<; i++) { ; j<=i;j++) { System ...