Webpack知识点
介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面
- 当修改了一个或多个文件
- 文件系统接收更改并通知webpack
- webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新
- HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp
- 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-loader
npm 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的构建流程是什么?从读取配置到输出文件这个过程尽量说全
- 初始化参数： 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
- 开始编译： 用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
- 确定入口： 根据配置中的 entry 找出所有的入口文件
- 编译模块： 从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译： 在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源： 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
- 输出完成： 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
如何在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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。