1.什么是Webpack?

Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

2.WebPack和Grunt以及Gulp相比有什么特性?

其实WebPack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过WebPack的优点使得WebPack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

Grunt和Gulp的工作流程

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

 
 

开始使用WebPack

初步了解了WebPack工作方式后,我们一步步的开始学习使用WebPack。

安装

Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为Webpack sample pro),在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack 

正式使用Webpack前的准备

1.在上述练习文件夹 中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建 这个package.json文件
npm init

输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

1.package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包

//安装 Webpack
npm install --save-dev webpack

2.回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的javaScript模块,public文件夹用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)。在这里 还需要创建三个文件,.index.html文件放在public文件夹中,两个js文件(Greeter.js和main.js)放在app文件夹中,此时项目结构 如下图所示

index.html文件只有最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

 Greeter.js只包括一个用来返回包含问候信息的html元素的函数。

// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};

main.js用来把Greeter模块返回的节点插入页面。

//main.js
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

正式使用Webpack

webpack可以在终端中使用,其最基础的命令是

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只需要指定一个入口文件,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack没有进行全局安装,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中属于如下命令

//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

结果如下

termialResult1

可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果

htmlResult1

有没有很激动,已经成功的使用Webpack打包了一个文件了。不过如果在终端中进行复杂的操作,还是不太方便且容易出错的,接下来看看Webpack的另一种使用方法。

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能(比如说本文后面会介绍的loaders和plugins),这些功能其实都可以通过命令行模式实现,但是正如已经提到的,这样不太方便且容易出错的,一个更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,可以把所有的与构建相关的信息放在里面。

还是继续上面的例子来说明如何写这个配置文件,在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,并在其中进行最最简单的配置,如下所示,它包含入口文件路径和存放打包后文件的地方的路径。

module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}

:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

现在如果你需要打包文件只需要在终端里你运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,这条命令会自动参考webpack.config.js文件中的配置选项打包你的项目,输出结果如下

webpack

又学会了一种使用Webpack的方法,而且不用管那烦人的命令行参数了,有没有感觉很爽。有没有想过如果可以连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

更快捷的执行打包任务

执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的,不过值得庆幸的是npm可以引导任务执行,对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可,设置方法如下。

{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" //配置的地方就是这里啦,相当于把npm的start命令指向webpack命令
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}

注:package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。

npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,以下是执行npm start后命令行的输出显示

npmStartTermialResult

现在只需要使用npm start就可以打包文件了,有没有觉得webpack也不过如此嘛,不过不要太小瞧Webpack,其强大的功能包含在其一系列可供配置的选项中,我们一项项来看。

Webpack的强大功能

生成Source Maps(使调试更容易)

开发总是离不开调试,如果可以更加方便的调试当然就能提高开发效率,不过打包后的文件有时候你是不容易找到出错了的地方对应的源代码的位置的,Source Maps就是来帮我们解决这个问题的。
通过简单的配置后,Webpack在打包时可以为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。

在webpack的配置文件中配置source maps,需要配置devtool,它有以下四种不同的配置选项,各具优缺点,描述如下:

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;

正如上表所述,上述选项由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

在学习阶段以及在小到中性的项目上,eval-source-map是一个很好的选项,不过记得只在开发阶段使用它,继续上面的例子,进行如下配置

module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}

cheap-module-eval-source-map方法构建速度更快,但是不利于调试,推荐在大型项目考虑da时间成本是使用。

本文参考:
链接:http://www.jianshu.com/p/42e11515c10f
來源:简书

 

 

Webpack 入门学习的更多相关文章

  1. webpack入门学习

    一.认识webpack webpack是一款模块打包加载工具.它能够将各种资源.JS.CSS.图片等作为模块打包加载.本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指 ...

  2. webpack入门学习手记(一)

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  3. webpack入门学习总结

    <h5概述</h5> webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分 ...

  4. webpack入门-个人学习资源收集

    本来是想自己写哈个人学习webpack心德的,不过网上现在已经有各种比较好的,详细的入门或者深入资源了. 所以我就简单总结了一下,我在入门webpack时看的一些博客和文档,以及顺道看到的一些觉得也应 ...

  5. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  6. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  7. webpack初步学习

    https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.

  8. webpack—入门

    点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...

  9. scss入门学习(一)

    sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...

随机推荐

  1. C#中如何应用索引器 ( How to use Indexers )

    C#中索引器是个好东西, 可以允许类或者结构的实例像数组一样进行索引. 在foreach或者直接索引时很有用. 使用索引器可以简化客户端代码, 即调用者可以简化语法,直观理解类及其用途. 索引器只能根 ...

  2. Win10系统右键添加Sublime Text 3的打开方式

    1.打开注册表编辑器,开始->运行->regedit. 2.在HKEY_CLASSSES_ROOT→ * → Shell 下,在Shell下,新建项命名为Open With Sublime ...

  3. 在visualstudio中使用Qt

    1.  说明 在此说明一下IDE跟封装的之间的关系,他们之间本质上来说没有关系,是可以多对对的关系. Qt开发是个比较泛的概念,Qt是由很多一系列类组成的整体,就像boost里面也有很多的类,而boo ...

  4. 卸载 Ubuntu gnome 自带的 Videos, Browser, Document Viewer等

    卸载命令 # uninstall Browser sudo apt-get remove --purge webbrowser-app # uninstall Videos sudo apt-get ...

  5. HDU-5979

    Convex Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  6. Eclipse&nbsp;Helios(3.6.2)下载地址

    Eclipse Helios(3.6.2)下载地址   鉴于有些插件最高只能支持到指定的eclipse 3.6版本,以此收集3.6下载地址 Eclipse Helios (v3.6.2) Eclips ...

  7. 2、CDH组件安装

    一.zookeeper 1.安装 继续->完成: 二.HDFS 1.安装 继续->完成: 三.yarn.hive 1.安装yarn 继续->完成: 2.安装hive 继续->完 ...

  8. 使用Postman测试请求

    Postman是什么 在开发或者调试网络程序或者是网页B/S模式的程序的时候,需要一些方法来跟踪网页请求,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具. 网页调试工具Postm ...

  9. 解决ubuntu下filezilla登录ftp看不到中文目录和文件的问题 (转载)

    转自:http://blog.csdn.net/duguteng/article/details/7716283 打开filezilla 文件-站点管理器-新站点--字符集--使用自定义的字符集 ,填 ...

  10. spring-boot-starter-data-redis学习笔记01

    1.Redis在Unbuntu14开启, 进入安装的src目录: 1.修改redis.conf,因为redis默认是受保护模式. protected-mode yes   (改为no) bind 12 ...