本文共 4167 字，大约阅读时间需要 13 分钟。

介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面

1. 当修改了一个或多个文件
2. 文件系统接收更改并通知webpack
3. webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新
4. HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp
5. HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新

如何利用webpack来优化前端性能？（提高性能和体验）

• 压缩代码：删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
• 利用CDN加速：在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
• 删除死代码（Tree Shaking）：将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
• 提取公共代码：commons-chunk-plugin

webpack打包原理

将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

如何提高webpack的构建速度？

• 多入口情况下，使用CommonsChunkPlugin来提取公共代码
• 通过externals配置来提取常用库
• 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
• 使用Happypack 实现多线程加速编译
• 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
• 使用Tree-shaking和Scope Hoisting来剔除多余代码

入口(entry)

module.exports = {    
       entry: './src',    
       entry: [        './src',        '/src2',    ],    
       entry: {        main: './src',    }    
       entry: {        app: './src/index.js',        vendors: './src/script/moment.js'    }   
       entry: {        page1: './src/page1.js',        page2: './src/page2.js',        page3: './src/page3.js',    }    }复制代码

出口(output)

module.exports = {    /*    output接受对象属性，参数为    filename: 打包后的文件名    path: 打包后所需导出的路径    */    
       output: {        filename: 'index.js',        path: path.resolve(__dirname, '/dist')    },   
       output: {        filename: '[name].js',        path: __dirname + 'dist'    }}复制代码

使用过webpack里面哪些plugin和loader

loader

• babel-loader: 将ES6+转移成ES5-
• css-loader,style-loader：解析css文件，能够解释@import url()等
• file-loader：直接输出文件，把构建后的文件路径返回，可以处理很多类型的文件
• url-loader：打包图片，和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

// url-loader增强版的file-loader，小于limit的转为Base64,大于limit的调用file-loadernpm install url-loader -D// 使用module.exports = {    module: {        rules: [{            test: /\.(png|jpg|gif)$/,            use: [{                loader: 'url-loader',                options: {                    outputPath: 'images/',                    limit: 500 //小于500B的文件打包出Base64格式，写入JS                }            }]        }]    }}复制代码

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• eslint-loader：通过 ESLint 检查 JavaScript 代码

plugins

• html-webpack-plugin: 压缩html
• clean-webpack-plugin: 打包器清理源目录文件，在webpack打包器清理dist目录
• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

什么是Tree-shaking？CSS可以Tree-shaking？

Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS

什么是长缓存？在webpack中如何做到长缓存优化？

• 浏览器在用户访问页面的时候，为了加快加载速度会对用户访问的静态资源进行存储，但是每一次代码升级或更新都需要浏览器下载新的代码，最简单方便的方式就是引入新的文件名称
• webpack中可以在output中指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不变

Loader和Plugin的不同？

不同的作用

• Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力
• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

不同的用法

• Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

1. 初始化参数： 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2. 开始编译： 用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3. 确定入口： 根据配置中的 entry 找出所有的入口文件
4. 编译模块： 从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5. 完成模块编译： 在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6. 输出资源： 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7. 输出完成： 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

如何在vue项目中实现按需加载？

Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后，在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了。

{  "presets": [["es2015", { "modules": false }]],  "plugins": [    [      "component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ]  ]}

作者：花生和鱼 链接：https://juejin.im/post/5e0037a0f265da33e056985b 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。