pack(packet翻译中文)

admin

作者

　　随着前端技术的飞速发展，webpack已经悄悄步入人们的视野。在起初做开发，我们的前端资源越来越多，从最开始的HTML、CSS和java到现在的js插件、图片、字体、less、sass、stylus等等，资源已经变得臃肿不堪。这时候，前端社区涌现了一些很好的实现方法，例如模块化。它就是帮我们把复杂的程序细小化为小的文件，从高提高页面性能，加快访问速度。这时候就出现了专门负责模块化打包的工具，例如Gulp/Grunt等，webpack就是其中之一，但是webpack模块化的解决方案要优于Gulp/Grunt类的工具。下面源码时代H5学科的讲师就为大家详细讲解一些有关Webpack入门相关知识。

　　1.什么是webpack

　　Webpack是我们的模块化打包机，它专门负责帮我们打包前端资源。将目前有些浏览器还不能直接识别的语言，例如ES6、Type、less、sass、stylus等等，直接先编译成ES5、css等供浏览器能识别的语言，这样我们就能在项目中直接使用新的技术、新的语法糖（例如JSX）来开发我们的页面，提高开发效率。

　　他的工作方式是：把你的项目当做一个整体，通过给定的主入口文件（例如index.js）查找到你项目的所有依赖文件，使用它内部的loaders加载器处理它们，最后打包为一个（或多个）可供浏览器识别的Java、图片、字体等文件。如下图所示：

　　左边是我们的项目资源文件，通过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’);

　　obj.innerHTML = “Hello World!”;

　　return obj;

　　}

　　然后在我们的index.js页面里面引入我们的hello.js模块。如下：

　　const hello = require(‘./hello.js’);

　　document.querySelector(‘#html页面元素id’).(hello());

　　回到主目录，这时候我们就可以使用webpack打包了，代码如下：

　　webpack app/index.js build/bundle.js