Webpack入门

随着前端技术的飞速发展，webpack已经悄悄步入人们的视野。在起初做开发，我们的前端资源越来越多，从开始的HTML、CSS和JS到现在的js插件、图片、字体、less、sass、stylus等等，资源已经变得臃肿不堪。这时候，前端社区涌现了一些很好的实现方法，例如模块化。它就是帮我们把复杂的程序细小化为小的文件，从高提高页面性能，加快访问速度。这时候就出现了专门负责模块化打包的工具，例如Gulp/Grunt等，webpack就是其中之一，但是webpack模块化的解决方案要优于Gulp/Grunt类的工具。下面源码时代H5学科的讲师就为大家详细讲解一些有关Webpack入门相关知识。
1.什么是webpack
Webpack是我们的模块化打包机，它专门负责帮我们打包前端资源。将目前有些浏览器还不能直接识别的语言，例如ES6、Typescript、less、sass、stylus等等，直接先编译成ES5、css等供浏览器能识别的语言，这样我们就能在项目中直接使用新的技术、新的语法糖（例如JSX）来开发我们的页面，提高开发效率。
他的工作方式是：把你的项目当做一个整体，通过给定的主入口文件（例如index.js）查找到你项目的所有依赖文件，使用它内部的loaders加载器处理它们，后打包为一个（或多个）可供浏览器识别的JavaScript、图片、字体等文件。如下图所示：
Webpack入门
左边是我们的项目资源文件，通过webpack打包后生成右边的静态资源。
2.使用webpack
1，安装
① 全局安装（npm/cnpm –g webpack）,方便打包。
② 本地安装（npm/cnpm –save-dev webpack），添加到我们的项目开发依赖包里面,方便下次使用。
2，初始化package.json文件（npm/cnpm init -y），“-y”可选。
这个文件里面包含有此项目的项目名称、项目描述、作者、许可证、依赖配置等重要信息，方便其他开发人员了解，当然如果你需要在npm上发布你的包的话。
3，建立项目目录
继续在我们的package.json所在的文件夹中，用“mkdir 文件夹名”建立两个文件夹，例如app和build，app就是我们开发项目的所在地，build是我打包后项目文件的生成地，其中还有一个需要我们事先写好页面结构的html页面，这个页面会引入我们打包后生成的js（通常为bunlde.js）。当然这个文件夹中还会有我们打包生成的css、png、字体等前端资源。那么在我们的app文件夹里，也会建立一个我们的入口js文件，例如index.js。他是我们webpack打包的入口。其他文件就是我们项目里根据需求开发的其他页面。
4，正式使用webpack
在我们的app文件夹里面建立其他的页面，例如hello.js。通过module.exports导出我们所写的内容。例如：
module.exports = function (){
var obj = document.crerateElement(‘div’);
ob***nerHTML = “Hello World!”;
return obj;
}
然后在我们的index.js页面里面引入我们的hello.js模块。如下：
const hello = require(‘./hello.js’);
document.querySelector(‘#html页面元素id’).appendChild(hello());
回到主目录，这时候我们就可以使用webpack打包了，代码如下：
webpack app/index.js build/bundle.js
app/index.js----------------------入口文件目录
build/bundle.js----------------------生成文件目录
5，找到我们的index.html，直接双击浏览即可，就可看到我们用webpack打包生成后的页面。
(未完待续.....)
感谢源码时代H5学科（http://www.its***）讲师提供此文章！
本文为原创文章，转载请注明出处！