webpack打包原理
把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
webpack工作方式：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
JavaScript应用程序的静态模块打包器，当处理应用程序时，会递归地构建一个依赖关系图
入口（entry）
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
const config={
entry:'./path/to/my/entry/file.js'
};
module.exports=config;
输出（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
const config={
output:{
filename:'bundle.js',
path:'/home/proj/public/assets'
}
};
module.exports=config;
对于多个入口起点
{
entry:{
app:'./src/app.js',
search:'./src/search.js'
},
output:{
filename:'[name].js',
path:__dirname+'/dist'
}
}
loader
webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
在webpack的配置中loader有两个目标
test属性 用于标识出应该被对应的loader进行转换的某个或某些文件
use属性 表示进行转换时，应该使用哪个loader
插件（plugins）
用法：由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。
相关概念：
bundle：是由webpack打包出来的文件，
chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。
loader：模块转换器，用于将模块的原内容按照需要转成你想要的内容
plugin：用于扩展webpack的功能，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。
模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。
webpack的优势
（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
（2）能被模块化的不仅仅是 JS 了。
（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
（4）扩展性强，插件机制完善
webpack与gulp/grunt的区别
webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。
什么是模热更新？有什么优点？
模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删除模块，无需重新加载整个页面，是高级版的自动刷新浏览器。
优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式
webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。
什么是长缓存？在webpack中如何做到长缓存优化？
浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。
在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。
什么是Tree-sharking?
tree-sharking 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。
webpack和rollup的区别
webpack 拆分代码， 按需加载；Rollup 所有资源放在同一个地方，一次性加载，利用tree-shake特性来剔除项目中未使用的代码，减少冗余，但是webpack2已经逐渐支持tree-shake
一般对于应用使用webpack，对于类库使用rollup
如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。
如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。
打包webpack的过程
1.创建工作目录
2.npm init（创建package.json文件）
3.npm install webpack --save--dev（安装一些项目依赖的包在node_modules文件夹内）
4.创建一个静态页（index.html）及入口文件（app.js）
5.执行命令：webpack app.js bundle.js