webpack笔记
作用
模块打包机:分析项目结构,找到js模块以及其他一些浏览器不能直接运行的拓展语言(Scss、TypeScript等),将其转换和打包为合适的样式供浏览器使用。
与Grunt、Gulp相比
Grunt、Gulp是优化前端开发流程的工具。工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤,工具可以帮你自动完成。
Webpack的工作方式是:把项目当做一个整体,通过一个给定的主文件(如index.js),Webpack将从这个文件开始找到你项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可以识别的js文件。
热更新
配置文件提供一个入口一个出口。wepack --watch命令可以动态监听文件改变并打包,输出新的bundle.js文件,但这样文件多了以后打包会变慢,且不能热更新,需要手动刷新浏览器。
webpack-dev-server
就能克服上面两个问题,它启动了一个使用express
的http服务器,它跟client
使用websocket
通讯,原始文件改动后,webpack-dev-server
会实时的编译,但不会输出到输出文件夹,而是保存在内存中。
npm 指令配置
npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令来替代略微繁琐的命令(node_modules/webpack)
如:
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack"
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
注:package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。
Source Maps配置(使调试更容易)
配置位置如下:
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
Source Maps可以找到出错位置,根据配置的不同,打包速度和调试效果也不同eval-source-map
:推荐开发阶段使用,打包速度较快,有完整的Source Maps
,但生成的js有安全和性能隐患,生产阶段打包一定要关闭!cheap-module-eval-source-map
方法构建速度更快,但是不利于调试,推荐在大型项目考虑时间成本时使用。
下一篇: webpack笔记: