关于webpack

是什么？
WebPack可以看做是模块打包机：它会分析的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。这段话有三个重点：
打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

常用插件：
loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，它直接对整个构建过程起作用。plugin使用范围更广，通常只需要require()然后添加到plugins数组中，且需要new一个。
webpack插件分为两种，一种是内置插件，不需要安装和引用可直接使用，另一种是第三方插件，需要npm安装，require引用后才可使用。
常用内置插件：

• UglifyJsPlugin — js压缩 解析/压缩/美化所有的js chunk，传入 options 可以满足更多的定制化需求。
• 全局挂载插件providePlugin 当遇到指定标识符的时候，自动加载模块。
• commonsChunkPlugin 合并公共模块为单独文件，比如全局通用的js等，长期不会修改的，从而可以从缓存中取，优化网页性能。

第三方插件：

• 自动补全css3前缀— autoprefixer
• Html文件打包插件—- html-webpack-plugin：依据一个简单的index.html模版，生成一个自动引用你打包后的js文件的新index.html
• 分离css文件—- extract-text-webpack-plugin：会将入口中引用的css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中。
• 消除未使用的CSS —- purifycss-webpack
• 拷贝资源插件— copy-webpack-plugin
• HotModuleReplacementPlugin: 它允许你在修改组件代码时，自动刷新实时预览修改后的结果。注意永远不要在生产环境中使用HMR。

WebPack 的优势

• WebPack 同时支持 commonJS 和 AMD/CMD，方便代码迁移
• 不仅仅能被模块化 JS ，还包括 CSS、Image 等
• 能替代部分 grunt/gulp 的工作，如打包、压缩混淆、图片base64
• 扩展性强，插件机制完善，特别是支持 React 热插拔的功能

webpack使用了哪些loader
loader的作用：loader是webpack最重要的部分之一，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。作用：

• 实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js
• 转换这些文件，从而使其能够被添加到依赖图中

常用的loader：

• babel-loader： 让下一代的js文件转换成现代浏览器能够支持的JS文件。
• css-loader,style-loader:两个建议配合使用，用来解析css文件，能够解释@import,url()如果需要解析less就在后面加一个less-loader。【css-loader：加载.css文件
  style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面】
• file-loader: 生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名【解决引用路径的问题】。
• url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时，返回一个DataURL。【如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl】

打包体积
优化思路
1. 提取第三方库或通过引用外部文件的方式引入第三方库
2. 代码压缩插件UglifyJsPlugin
3. 服务器启用gzip压缩
4. 按需加载资源文件 require.ensure
5. 优化devtool中的source-map
6. 剥离css文件，单独打包
7. 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
打包效率
1. 开发环境采用增量构建，启用热更新
2. 开发环境不做无意义的工作如提取css计算文件hash等
3. 配置devtool
4. 选择合适的loader
5. 个别loader开启cache 如babel-loader
6. 第三方库采用引入方式
7. 提取公共代码
8. 优化构建时的搜索路径 指明需要构建目录及不需要构建目录
9. 模块化引入需要的部分