网络包打包js方法
Webpack是一个前端资源加载/打包工具。它会根据模块的依赖关系进行静态分析，然后根据指定的规则从这些模块中生成相应的静态资源。
在代码练习之前，我们先来谈谈webpack的基础知识。
1.为什么使用网络包
现在很多网页都可以看作是功能性的应用，有着复杂的JavaScript代码和大量的依赖包。为了简化开发的复杂性，前端社区出现了许多好的实用方法
模块化让我们可以将复杂的程序细化成小文件；类似于TypeScript这种对JavaScript进行扩展的开发语言，它让我们认识到当前版本的JavaScript无法直接使用的特性，然后可以用JavaScript文件来替代，让浏览器能够识别；SCS，less和其他css预处理程序…2。什么是网络包
WebPack可以看作是一个模块打包器：它所做的是分析你的项目结构，找到JavaScript模块和其他扩展语言(Scss、TypeScript等)。)浏览器不能直接运行，并将其打包成适合浏览器使用的格式。
3.与咕噜和大口相比，网络包有什么特点
其实Webpack跟其他两个没有太大的可比性。gull/Grunt是一个可以优化前端开发流程的工具，而WebPack是一个模块化的解决方案。然而，Webpack的优势使其有可能取代glow/Grunt类的工具。
Grunt和glugh通过指定编译、组合和压缩配置文件中的一些文件的具体步骤来工作，这个工具可以在以后自动为您完成这些任务。
这些改进极大地提高了我们的开发效率，但是用它们开发的文件往往需要额外的处理才能被浏览器识别，手动处理非常防锁定，这就为WebPack工具的出现提供了需求。
Webpack的工作方式是：把你的项目作为一个整体，通过一个给定的主文件(比如index.js)，Webpack会从这个文件中找到你项目的所有依赖文件，使用加载器进行处理，最后打包成一个浏览器可以识别的JavaScript文件。
从图中我们可以看到，Webpack可以将各种静态资源js、css、less转换成静态文件，从而减少页面请求。
如果我们真的想比较两者，Webpack可以处理得更快更直接，可以打包更多不同类型的文件。
接下来，我们简单介绍一下Webpack是如何合并多个js文件的(注意这只是一个文件合并，也就是把多个写好的JS合并到一个JS文件中，以减少http请求)。
安装网络包
在安装Webpack之前，您的本地环境需要支持node.js安装node.js时可以参考node的官方文档.
使用以下命令全局安装webpack。
$ npm install webpack -gwebpack已安装在计算机上，现在可以使用webpack命令。
在项目中使用webpack
使用以下命令在项目根目录中生成package.json文件。
$ npm init将webpack安装到项目中
将webpack添加到pageage.json配置文件中，并使用以下命令：
$ npminstall-save-dev webpack。此时查看package.json文件。与刚刚创建的package.json相比，增加了一个新的代码。
网络包包装的两种方式
Webpack entryentry输出(命令行)webpack -config webpack.conf.js(指定Webpack的配置文件)使用命令行打包js
一：创建两个js文件
创建app.js、sum.js、sum.js导出一个加法函数，由app.js使用。
//app.jsimport {sum} from ' '。/sum '；console . log(‘sum(21，22)’，sum(21，22))；//sum.jsexport函数sum(a，b){ return a b；}二：使用webpack命令打包
在当前目录中使用：web pack app . js bundle . js；这里的入口是app.js，输出文件是bundle.js，所以可以看到文件中还有一个额外的bundle.js文件。
创建一个html文件运行，导入bundle.js运行，控制台会打印：sum(21，22) 43。
用webapck的配置文件(上面的两个js文件)打包
创建一个webpack.conf.js并编写wepack的配置文件
//配置文件使用了commonjs规范的module.exports={//entry，它是一个对象entry : { app 3360 }。/app.js'}。//output : {//js Filename : '[Name]。[hash :5]。js'}}在命令行输入：Webpack-ConfigWebPack.conf.js，发现生成了一个带hash的js文件。将这个js文件引入HTML，发送正常输出：sum(21，22) 43配置文件的名称是webpack.config.js，可以直接在命令行输入webpack。Webapck和babel包ES6和es7
在项目的根目录下安装bable-loader和babel-core、babel-preset
使用npm init生成一个配置文件npm安装babel-loader babel-core-save-dev创建一个新的app.js，index.html。编写webpack.config.js和其他文件。安装巴别塔-预置指定编译版本：NPM安装巴别塔-预置-环境-保存-开发。在app.js中编写一些ES6语法使用命令行输入webpack来编译webpack配置文件
//配置文件使用了commonjs规范的module.exports={//entry，它是一个对象entry : { app 3360 }。/app.js'/相对路径}。//输出output : {//jsfilename : '[name]。[hash:8]。js'}，//指定loadermodule3360 {//rules中的哈希项是规则rules 3360[{ test 3360/\的值。js$/，//是常规的，满足这些规则的资源将使用一个load来处理use 3360 { loader : ' babel-loader '。//使用bable-loader处理选项： {//指定参数预设： [['babel-preset-env '，{targets 3360 {browsers 3360 ['1% '，Last 2 version'] //可以转到babel-preset检查}}]//指定编译后使用哪种语法} }，exclude : '/node _ module/'//exclude }]} } app . js和js带有hash
//app . jslet func=()={ }；const num=30让arr=[3，4，5，6]；让NewArr=arr . map(item=item * 2)；//将每一项放在前面的数组*2console.log(newArr)中；//========================///编译后(编译后的代码直接被截取)'使用strict '；var func=func func(){ }；var num=30var arr=[3，4，5，6]；var newArr=arr.map(函数(item){ return item * 2；});//将每一项放在前面的数组*2console.log(newArr)中；巴别塔的两个插件：巴别塔Polyfill和巴别塔运行时转换
用于处理一些函数和方法(泛型、集合、映射、数组。来自等。不是由babel处理的，需要上面两个插件)
巴贝尔Polyfill(全局垫圈)，npm安装巴贝尔-polyfill -保存，使用：导入'巴贝尔-poly fill '；巴别塔运行时转换(针对开发框架)，NPM安装巴别塔-插件-转换-运行时-保存，NPM安装巴别塔-运行时-保存创建新的。babelrc在app.js中配置新代码
导入“babel-poly ill”；让func=()={ }；const num=30让arr=[3，4，5，6]；让NewArr=arr . map(item=item * 2)；//将每一项放在前面的数组*2console.log(newArr)中；//需要babel-poly illarr . includes(8)；//genericer function * func 2(){ } web pack配置
//配置文件使用了commonjs规范的module.exports={//entry，它是一个对象entry : { app 3360 }。/app.js'/相对路径}。//输出output : {//jsfilename : '[name]。[hash:8]。js'}，//指定loadermodule3360 {//rules中的哈希项是规则rules 3360[{ test 3360/\的值。js$/，//是常规的，满足这些规则的资源将使用load来处理use : { loader : ' babel-loader '，//使用bable-loader来处理options 3360 {//指定参数}}，exclude 3360 '/node _ module/'//exclude
{ ' preferences ' :[[' babel-preference-env '，{ ' targets ' : { ' browsers ' :[' 1% '，' last 2 version ']}]，' plugins ' :[' transform-runtime '
