学会最热门的webpack前端打包瞬间变大神

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。

为什么要使用webpack

Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：

1.支持commonJS和AMD模块。

2.支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。

3.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

4.使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。

nodejs的安装

因为webpack是基于node.js来工作的所以在学习webpack之前我们应该先安装node.js

node.js的安装步骤非常简单如下安装即可:

1、下载nodejs 下载地址：nodejs.cn

2、安装nodejs非常简单，根据提示一直下一步即可

webpack的安装

一、运行电脑上的cmd（打开方法是：windows+r就会出现右图的窗口，然后输入cmd 回车就可以了）

二、node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。注：未能出现版本号，请尝试注销电脑重试；

三、npm -v 查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器 注：npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等 ）（知道就好不需要记住）

四、安装全局的webpack命令：npm install -g webpack （你的项目在哪个盘就安装的哪个盘的根目录，比如：项目在F盘，我们就可以在 F: 里安装webpack）

五、在你的项目的根目录下创建配置项 npm init 之后一直回车键就好

六、npm install --save-dev webpack安装作为项目开发所需要的依赖项（安装成功后会出现右图现象）

webpack的简单使用（一）

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

在我们的项目根目录下创建一个名字为webpack.config.js（一定是这个名字），然后在配置项中写入以下代码：

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

entry表示入口文件

entry:__dirname+'/app/main.js',//入口文件的位置

output:{

path:__dirname+'/public',//打包后文件放置的位置

filename:'bundle.js'//打包后输出文件的文件名

创建一个入口文件main.js我们把它放在名字叫做app的文件夹内，他的作用就是来引入我们的项目文件

greeter.js只包括一个用来向html文件写一句问候的话语。

运行webpack， 在命令行中输入 webpack （入口文件路径） （生成文件的路径）

（注：文件路径相对于我们项目的根目录）

运行成功后会出现如下图所示的样子 刷新页面就会出现“欢迎收看后盾网视频教程”

另一种运行webpack的方法

如果每次运行 webpack都要执行 webpack webpack （入口文件路径） （生成文件的路径）

这样会很麻烦所以我们只需要在 package.json的配置项添加一行配置项就可以了，

“start”:”webpack”, 在命令行的运行中我们只需要运行 npm start 就可以了

（注：因为 start属于特殊名字，当我们起的名字不是start的时候 我们在运行的时候 应输入 npm run 我们起的一个名字 如：npm run hello ）

webpack之loaders

Loaders是webpack中最核心的功能了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

loaders之配置项

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：

test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

query：为loaders提供额外的设置选项（可选）

视频链接地址：http://blog.sina.com.cn/s/blog_1671244030102wxpm.html

更多精彩内容请关注 ---- 微信公众号：houdunit

看完不要跑记得出来吐吐槽！╰(￣▽￣)╮