谈谈webpack
webpack是一个Js的模块打包程序。通过入口文件找到每个文件的依赖,使用loaders进行处理,最后得到Js文件。
与glup和grunt的区别在于模块化(AMD,CommonJ)
webpack的核心
- 入口
entry所有文件的起点,构建依赖图的开始 - 出口
output打包完成的Js文件。 - 模块
module中定义相应的loader转换器,将特定的文件进行格式转化。 - 插件
plugin
作为Webpack的拓展,插件可以监听到webpack构件过程中的特定事件
问题
区分module,chunk,bundle
module,是模块化划分的文件,一般在其中对响应模块进行转换处理。chunk对应一个或多个module加载编译之后的文件。bundle所有module加载编译完成后得到的最终文件。chunk组成了bundle
Webpack如何配置
let webpack = require('webpack');
module.exports = {
entry:'./entry.js', //入口文件
output:{
//node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
path:__dirname, //输出位置
filename:'build.js' //输入文件
},
module:{
// 关于模块的加载相关,我们就定义在module.loaders中
// 这里通过正则表达式去匹配不同后缀的文件名,然后给它们定义不同的加载器。
// 比如说给less文件定义串联的三个加载器(!用来定义级联关系):
rules:[
{
test:/\.css$/, //支持正则
loader:'style-loader!css-loader'
}
]
},
//配置服务
devServer:{
hot:true, //启用热模块替换
inline:true
//此模式支持热模块替换:热模块替换的好处是只替换更新的部分,而不是页面重载.
},
//其他解决方案配置
resolve:{
extensions:['','.js','.json','.css','.scss']
},
//插件
plugins:[
new webpack.BannerPlugin('This file is create by baibai')
]
}
如何配置多个入口文件
entry:{
home:resolve(_dirname,"")
index:resolve(_dirname,"")
}
Webpack的原理
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
- 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
- 确定入口:根据配置中的 entry 找出所有的入口文件
- 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
- 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
- 在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
Webpack中多次加载的元素打包后有几次
写loader和plugin的思路
loader只针对于单一转义,获取原来内容使用callback处理回调结果plugin可监听事件
loader和plugin的区别
loaders加载器。
Webpack模块化,只能解析JavaScript类型文件,使用loader可解析其他类型。在module.rules中配置。
比如babel-loader将ES6转换成ES5。再比如css-loader加载CSSplugin作为插件,自定义打包的方式,参与整个打包流程。单独配置。
使用webpack优化前端
- 删除无用代码、注释、压缩体积
- 路由按需加载
- 小图片使用
base64 - 使用外部CDN
- 将打包文件添加哈希,使用浏览器缓存文件

被折叠的 条评论
为什么被折叠?



