webpack
Posted yingmhd
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack相关的知识,希望对你有一定的参考价值。
webpack
是一个JS应用打包器,它借助loaders(比如 sass-loader)
和plugins(比如UglifyJsPlugin)
将各种形态的的文件压缩、打包、优化,变成浏览器可以正常解析的文件。
模块化机制
它允许各种模块化规范的存在,你可以用export
,也可以用exports
,你可以用import
,也可以用require
,至于依赖关系,它自动处理好。
核心思想
- 一切皆模块
你可以require
一个js文件,也可以require
一个css文件 - 按需加载
传统模块打包工具最终将所有的模块编译成一个庞大的bundle.js
,而webpack
分割成了许多个bundle
文件,而且异步加载代码实现按需加载
工作步骤
- 从入口文件开始递归建立一个依赖关系图
- 将所有的模块转化成模块函数,模块id是唯一记号
- 根据依赖关系,按照配置文件将模块函数分组打包成若干个
bundle
- 通过
script
标签将打包后的bunld
注入到html
中,通过manifest
文件来管理bundle
文件的运行和加载
manifest 文件作用
用来引导模块的交互。manifest
文件包含了加载和处理模块的逻辑。
.map 文件作用
webpack
打包后会生成一个.map
文件,这个主要为了调试方便,可以精确指出错误在哪里
常用优化
- include & exclude实现精准打包
- resolve.extension 设置文件默认后缀,默认是
[\'.js\', \'.json\']
- HappyPack将任务分解为多个子进程
- watchOptions监听文件变化发生后一段时间再刷新浏览器,防止刷新了文件还没编译好
- 模块热替换
区分环境
if(process.env.NODE_ENV == \'production\'){ console.log(\'生产环境\'); }else{ console.log(\'开发环境\'); }
- Tree Shaking剔除
javascript
用不上的死代码 - 使用
common-chunk-and-vendor-chunk
提取公共代码 - splitChunks将公共的依赖提取到一个新生成的
chunk
,防止重复
以上是关于webpack的主要内容,如果未能解决你的问题,请参考以下文章
Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段
报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段
报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段