gulp&&webpack打包

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/daoer_sofu/article/details/89856723

gulp

• gulp.src 文件输入
• gulp.dest 文件输出
• gulp.task 建立任务，参数（名称，函数）
• gulp.watch 监控文件变化 gulp+browserify配置nodejs转chrome代码

gulp和webpack的区别

gulp前端打包、webpack模块打包、entry输入、output输出

webpack

loader：函数预处理，不同类型文件使用不同loade打包r，file-loader(生成md5)、html-loader plugin：loader扩展

• copy-webpack-plugin插件，只拷贝不合并文件

module：各种语言划分 target：node、web devtool：sourcemap选项

• eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL
• source-map： 产生.map文件
• cheap： 不包含列信息（代码精确到列的位置信息)也不包含loader的sourcemap
• module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
• inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见） entry：每个输入相对独立，有相互依赖的使用CommonsChunkPlugin 配置

打包过程调试package.json： node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

问题

• webpack打包缺少模块，externals可以解决，或者坑能是node_modules模块本身编译有问题，npm install后重新编译
• webpack打包fs、child_process等模块到chrome会报错，可以添加node节点，使浏览器支持node