webpack是个什么玩意儿?

去年开始从做Android渐渐转换角色做了前端开发，Node.js、es6、webpack、require、Gulp、Grunt、Angular、Vue、React各种腥风血雨扑面而来，世界变化快，人老反应慢，世事无绝对，只怕有心人，少壮不努力，老大徒相亲伤悲，前端开发小学生在这里谢谢所有帮助过我的朋友们，在我落寞的岁月里，你的温柔解脱我的孤寂。

给您鞠躬了！

你们永远活在我的心中！

---

人生就是一个不断的轮回，想当年刚转行android的时候也是各种明枪暗箭专往要害招呼，什么线程更新ui啦，handler发送消息啦，网络请求解json啦，动画啦，内存泄露拉等等等等，好不容易用灵活的身段避开了所有的伤害，结果换了个坑，还是有那么多套路，自古真情留不住，下面这些套路，希望能得人心：

箭头有点歪

这张图主要参考的 Gulp和webpack的区别，是“同一种”工具吗？这篇文章

是的，你没看错文字是抄的，可是我这个人喜欢画画是个艺术家这样看的更有逻辑一点，于是就有了上面那张图，如果有错，你们也不许喷我，温油的告诉我就行了，说了这么多 扯了很多其他的东西文章的标题说了，要把webpack是个什么玩意搞清楚，于是我就跑到了下面这个网站狠狠的啃了一波文档:

webpack的LOGO真帅

webpack主页就是这个网站，官网来的，一定要进去逛逛，一定有惊喜

webpack到底干了啥？我们先来看一下部署在服务器上的东西有哪些？

哇，好多串串

默认访问的肯定是index.html咯，看看有些啥

很好主页把需要的js和css都引入了，这样一运行我们的页面就出来了，可是问题来了，我写代码的时候不是长这样的，这感觉亚洲四大邪术都用上了变化才能这么大啊，必然是webpack这个家伙背地里动了什么手脚！！

webpack.png

好了，上面就是亚洲四大邪术webpack的四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。

入口：指定了所写代码的根节点文件，可以认为是根上下文(contextual root) 或 app 第一个启动文件。，这个文件中import了项目中编写的模块和依赖的第三方模块，webpack编译时将模块引入重新组织代码生成最终的输出文件。
出口：指定了编译的结果文件存放到哪里，以及描述了如何处理归拢的代码。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loader：在获得输入描述并加载文件后，在输出到指定位置之前，转换各种文件为浏览器能理解的 JavaScript模块,test:需要转换的文件类型，use:使用的Loader

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

插件：相比于Loader插件更常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能，webpack有很多很有用的插件可以在官网上找到。
webpack概念这里有webpack的更多详细资料想要真正用得溜还是得上去啃一遍