前言

在还未接触webpack,就有几个疑问:

1. webpack本质上是什么?

2. 跟异步模块加载有关系吗?

3. 可否生成多个文件,一定是一个?

4. 被引用的文件有其他异步加载模块怎么办?

在学习webpack时,也有几个疑问:

1. webpack有哪些常用的插件?

2. 常用的Loader有哪些?

3. 由于运行时是使用编译后,那开发调试怎么办?

在学习webpack后,也剩几个疑问:

1. 为什么用选择webpack?

2. webpack的局限地方,或者不适用场景?

webpack是什么

webpack是一个前端构建的打包工具(并不是什么库或框架), 它能把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用。

根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

代码拆分(关键)

webpack有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

其实就是异步部分用require.ensure方法包裹起来,里面所有的依赖会生成单独一个文件,每一个require.ensure生成一个文件。

示例:

index.html

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="t1"></h1>
<h2 id="t2"></h2>
<script src="dist/bundle.js"></script>
</body>
</html>

entry.js

document.getElementById("t1").innerHTML = 'I comming.';
require.ensure([], function () {//这里是异步的
console.log("进入require.ensure回调")
require("./module.js");
require("./module2.js");
console.log("调用完require.ensure")
});
require.ensure([], function () {//这里是异步的
require("./module3.js");
});

module.js

document.getElementById("t2").innerHTML = 'I am async module.';
console.log('我是module.js啊啊啊啊');

module2.js

console.log('我是module2.js啊啊啊');

module3.js

console.log('我是module3.js啊啊啊');

webpack.config.js

var webpack = require('webpack');
var path = require("path"); module.exports = {
entry: './entry.js',
output: {
path: path.join(__dirname, "dist"),
filename: 'bundle.js',
publicPath:"dist/", //给require.ensure用
chunkFilename: "[name].chunk.js"//给require.ensure用
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by lufeng')
]
}

效果如下:

Q&A

1. webpack本质上是什么?

答:本质上就是打包工具,不是框架也不是库。

2. 跟异步模块加载有关系吗?

答:webpack可以将需要异步加载的模块(一个或多个)生成另外一个单独文件,在require时才加载,算是有点关系吧。

3. 可否生成多个文件,一定是一个?

答:可以生成多个,一种是在webpack.config.js的entry声明,另一种是异步依赖部分。

var webpack = require('webpack');
var path = require("path"); module.exports = {
entry: {
"entry" : './entry.js',
"common" : './common.js'
},
output: {
path: path.join(__dirname, "dist"),
publicPath:"dist/", //给require.ensure用
filename: "[name].js"
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by lufeng')
]
}

4. 被引用的文件有其他异步加载模块怎么办?

答:这个如第二个问题,异步部分生成一个单独文件。

webpack loaders、plugins

Loader

webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 webpack 可以处理的模块。

Plugin

webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 webpack 插件,来满足各式各样的需求。

webpack loaders列表:http://webpack.github.io/docs/list-of-loaders.html

webpack plugins列表:http://webpack.github.io/docs/list-of-plugins.html

一些常用插件介绍文章:

1. 【WebPack实例与前端性能优化】:http://www.cnblogs.com/giveiris/p/5237080.html

2. 【webpack 使用优化指南】: http://www.cnblogs.com/yumeiqiang/p/5281170.html

Q&A

3. 由于运行时是使用编译后,那开发调试怎么办?

由于页面引用的是编译生成后的文件,那在开发的情况下,如何进行调试是我立马想到的问题,难道在编译后的文件调试,然后找到原文件改回来,这样太麻烦了。

答:有可以显示是原文件的办法,步骤是:

(1). 在webpack.config.js配置devtool属性

{
devtool: "source-map"
}

(2). 使用 webpack-dev-server 开发服务。

# 安装

$ npm install webpack-dev-server -g

# 运行

$ webpack-dev-server --progress --colors

PS:它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

——这样就能愉快的开发调试了。

webpack后谈

1. 为什么用选择webpack?

在我看来,选择webpack应该是有几点明显优点:

(1). 可以将各种静态资源视作模块加载,不像RequireJS只能加载js。

(2). 可以很好的拆分成按需加载的块,加载模块方式非常舒适,不需回调。

(3). 扩展性强,插件机制完善。

2. webpack的局限地方,或者不适用场景?

不适用场景这个很难讲,就不深究,而局限地方,等到彻彻底底踩坑后再做总结。

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5790752.html

webpack学习总结的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. webpack学习(入门基础)

    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...

  3. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  4. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. Webpack学习-Plugin

    原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...

  6. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  7. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  8. webpack学习(六)—webpack+react+es6(第2篇)

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  9. webpack学习(五)—webpack+react+es6(第1篇)

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  10. webpack学习(三)

    前篇:webpack学习(二) jquery不需要在项目中自己下载,而是作为一个模块引入.jquery的存放路径是在 node_modules目录下.1.首先给项目安装jquery,npm insta ...

随机推荐

  1. 谈谈DOMContentLoaded:Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. Js new到底发生了什么

    在Js中,我们使用了new关键字来进行实例化 那么在这个new的过程中到底发生了什么? 关于构造函数的return 正常来讲构造函数中是不用写return语句的,因为它会默认返回新创建的对象. 但是, ...

  3. 关于微软HttpClient使用,避免踩坑

    最近公司对于WebApi的场景使用也越来越加大了,随之而来就是Api的客户端工具我们使用哪个?我们最常用的估计就是HttpClient,在微软类库中命名空间地址:System.Net.Http,是一个 ...

  4. .Net Core MVC 网站开发(Ninesky) 2.2、栏目管理功能-System区域添加

    在asp或asp.net中为了方便网站的结构清晰,通常把具有类似功能的页面放到一个文件夹中,用户管理功能都放在Admin文件夹下,用户功能都放在Member文件夹下,在MVC中,通常使用区域(Area ...

  5. .net 分布式架构之配置中心

    开源QQ群: .net 开源基础服务  238543768 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ConfigManager ...

  6. MySQL主从环境下存储过程,函数,触发器,事件的复制情况

    下面,主要是验证在MySQL主从复制环境下,存储过程,函数,触发器,事件的复制情况,这些确实会让人混淆. 首先,创建一张测试表 mysql),age int); Query OK, rows affe ...

  7. OpenCV模板匹配算法详解

    1 理论介绍 模板匹配是在一幅图像中寻找一个特定目标的方法之一,这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否“相似”,当相似度足够高时,就认为找到了我们的目标.OpenCV ...

  8. WCF基础

    初入职场,开始接触C#,开始接触WCF,那么从头开始学习吧,边学边补充. SOA Service-Oriented Architecture,面向服务架构,粗粒度.开放式.松耦合的服务结构,将应用程序 ...

  9. Flexible 弹性盒子模型之CSS flex-basis 属性

    实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;}   效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...

  10. Android之SQLite数据存储

    一.SQLite保存数据介绍 将数据库保存在数据库对于重复或者结构化数据(比如契约信息)而言是理想之选.SQL数据库的主要原则之一是架构:数据库如何组织正式声明.架构体现于用于创建数据库的SQL语句. ...