m0_38066007的博客

前端代码为何要进行构建和打包？module、chunk、bundle 分别什么意思，有何区别？loader 和 plugin 的区别？webpack 如何实现懒加载？webpack 常见性能优化babel-runtime 和 babel-polyfill 的区别基本配置高级配置优化打包效率优化产出代码构建流程概述babel...

webpack 在编译代码过程中，会触发⼀系列 Tapable 钩⼦事件，插件所做的，就是找到相应的钩⼦，往上⾯挂上⾃⼰的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩⼦的触发⽽执⾏了。Plugin: 开始打包，在某个时刻，帮助我们处理⼀些什么事情的机制plugin要⽐loader稍微复杂⼀些，在webpack的源码中，⽤plugin的机制还是占有⾮常⼤的场景，可以说plugin是webpack的灵魂设计模式事件驱动发布订阅plugin是⼀个类，⾥⾯

原始配置：entry:{ index:"./src/index", list:"./src/list", detail:"./src/detail"}new htmlWebpackPlugins({ title: "index.html", template: path.join(__dirname, "./src/index/index.html"), filename:"index.html", chunks:[i...

创建⼀个替换源码中字符串的loader// index.jsconsole.log("hello老韩");// replaceLoader.js// 函数声明式函数 不可以是箭头函数// 函数必须有返回值// 需要⽤声明式函数，因为要用到上下⽂的this,⽤到this的数据，该函数接受⼀个参数，是源码module.exports = function(source) { console.log(source, this, this....

官⽅⽹站：https://webpack.js.org/概念webpack is a module bundler(模块打包⼯具)Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中。是⼯程化、⾃动化思想在前端开发中的体现安装webpack环境准备nodeJs https://nodejs.org/en/版本参考官⽹发布的最新版本，可以提..

webpack是如何进行代码混淆的。这里用到了一个插件。uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-pluginnpm install uglifyjs-webpack-plugin --save-dev基中有两个子属性：minimize 正常情况下开发环境为false,...

一、webpack output中，hash和chunkhash区别https://blog.youkuaiyun.com/Scarlett_Dream/article/details/78856240

npm init mulin 创建项目npm install webpack-cli --save-dev 安装webpack脚手架npm install webpack--save 安装webpacknpm install file-loader -D 用于打包文件（图片，文档等） loader为文件处理方案npm install url-loader --sa...