前言很久以前，当我们的前端还只是一个页面切出时代，我们在开发一个html页面的时候，通常会遇到这些情况：我们需要引入十几个css和js文件，而且因为相互之间有依赖关系，引入的顺序不能乱。传统的html+css+js开发方式无法很好的利用less/scss等css预处理器和ES6+的高级语法。代码复用性差，可维护性差。这时候就需要一个工具来处理这些问题，webpack就应运而生了。webpack可以看作是一个模块打包工具：它把各种静态资源（如：javaScript文件、图片文件、css文件等）组合在一起，打包好的文件就可以在浏览器中使用了。相关推荐我的github：github.com/Michael-lzg我的掘金：https://juejin.im/user/5b52fd...从零开始构建webpack项目总结几种webpack打包优化方法webpack的优点：代码转换：typeScript编译成javaScript，scss，less编译成css。文件优化：压缩javaScript、css、html代码，压缩合并图片。代码拆分：提取多个页面的公共代码，将不需要在首屏执行的代码提取出来，让其异步加载。模块合并：一个模块化项目中会有很多模块和文件，需要一个构建函数将模块分类合并到一个文件中。自动刷新：监控本地源代码变化，自动重建和刷新浏览器。强大的扩展性和完善的插件机制。webpack打包流程：1.使用babel完成代码转换，生成单个文件的依赖2.从入口递归分析，生成依赖图3.将每个引用的模块打包成一个立即执行的函数4.编写最终的bundle文件在bundle.js中进入Webpack的四大核心：入口：js入口源文件输出：generatefileloader：processfile，作为构建其内部依赖图的起点。一旦进入入口点，webpack会找出入口点（直接和间接）依赖哪些模块和库，然后处理每个依赖项并输出到称为bundle的文件。单个条目：条目是一个字符串module.exports={entry:'./src/index.js'}多个条目：条目是一个对象module.exports={entry:{index:'./src/index.js',manager:'./src/manager.js'}}Output告诉webpack将它创建的bundle输出到哪里，以及如何命名这些文件，这些可以在webpack配置文件中指定。单入口配置module.exports={entry:'./src/index.js',output:{filename:'bundle.js',path:__dirname+'/dist'}};多入口配置module.exports={entry:{app:'./src/app.js',search:'./src/search.js'},output:{filename:'[name].js',path:__dirname+'/dist'}}使用[name]占位符来保证文件名的唯一Loaderloader以便webpack可以处理那些非javaScript文件（webpack本身只懂javaScript）。加载器可以将所有类型的文件转换成webpack可以处理的有效模块，然后你就可以使用webpack的打包能力来处理它们了。loader的特点一个Loader职责单一，只需要完成一次转换。Loader其实就是一个Node.js模块，需要导出一个函数。加载程序总是从右到左调用。常用的loader处理样式css-loader：加载.css文件，style-loader：使用style标签将css-loader内部样式注入到我们的html页面中less-loader，sass-loader：解析css预处理器处理js让你可以使用最新的js代码（ES6、ES7...）这样就可以使用基于js扩展的语言，比如React的JSX；在处理文件和图片资源时，常用的两种加载器是file-loader或url-loader，两者的主要区别是。url-loader可以设置图片大小限制。当图片超出限制时，其行为等同于file-loader。当图片不超过限制时，图片会以base64的形式打包到css文件中，减少请求处理.vue文件的次数vue-loader是webpack的loader模块，可以让我们写单文件组件在.vue文件格式中。单文件组件文件包含三个部分，模板、脚本和样式。vue-loader模块允许webpack使用单独的加载器模块（例如sass或scss加载器）提取和处理每个部分。此设置允许我们使用.vue文件进行无缝编程。开发一个loader需求：手写一个loader，把'kobe'转成'BlackMamba'。当然，您可以根据自己的需要进行设计。这里只是解释一下方法。1.在根目录下编写loader，新建一个目录kobe-loader作为我们loader的名字，执行npminit-y命令，新建一个模块化项目，然后新建一个index.js文件。相关源码如下：module.exports=function(content){returncontent&&content.replace(/kobe/gi,'BlackMamba')}2.注册模块正常。我们安装的loader是从npm下载安装的，但是我们可以使用kobe-loader目录下的npmlink来做把本地正在开发的一个模块的源码链接到项目的node_modules目录下，而不用发布模块，这样项目可以直接使用本地的npm模块。npmlink然后在项目根目录下执行如下命令，将注册到全局项目的本地npm模块链接到项目的node_modules$npmlinkkobe-loader注册成功后，我们可以在里面找到对应的loadernode_modules目录。3.在webpack中配置loader在webpack.base.conf.js中添加如下配置{test:/\.js/,loader:'kobe-loader'}此时我们在所有js文件下写'kobe'即可将它们全部替换为“黑曼巴”。4、以上配置参数为硬编码替换文本。如果我想通过配置项来改变，我可以在loader//custom-loader/index.jsvarutils=require('loader-utils')模块中做如下调整。exports=function(content){constoptions=utils.getOptions(this)returncontent&&content.replace(/kobe/gi,options.name)}//webpack.base.conf.js{test:/\.js/,use:{loader:'kobe-loader',options:{name:'kobe',}}}Plugin是webpack编译过程中专注于处理特定任务的功能模块，可以称之为插件。Plugin的特点是一个独立的模块模块暴露了一个js函数函数原型（prototype），并定义了一个apply方法注入到compiler对象中。apply函数需要通过compiler对象挂载一个webpack事件钩子，钩子的回调可以获取当前编译的编译对象。如果是异步编译插件，可以获取callback回调完成自定义子编译过程，处理complition对象内部数据。如果你异步编译插件，回调会在数据处理完成后执行。常用的PluginHotModuleReplacementPlugin代码热替换。因为Hot-Module-Replacement的热更新依赖于webpack-dev-server，当打包文件发生变化时会更新打包文件或者重新加载整个页面，而HRM只更新修改的部分。HtmlWebpackPlugin，生成html文件。将webpack中entry配置的相关entrychunk和extract-text-webpack-plugin提取的css样式插入到插件提供的模板或者templateContent配置项指定的内容中生成html文件。具体插入方法是将样式链接插入到head元素中，脚本插入到head或者body中。ExtractTextPlugin，生成css文件而不是内联。本插件的主要目的是提取css样式，防止在js中打包样式导致页面样式加载乱序的现象。NoErrorsPlugin报错但不退出webpack进程UglifyJsPlugin，代码丑陋，开发过程中不建议开启。uglifyJsPlugin用于压缩js文件，从而减小js文件的体积，加快加载速度。uglifyJsPlugin会降低webpack的编译速度。建议开发时关闭，部署时打开。多个html共享一个js文件（chunk），可用CommonsChunkPluginpurifycss-webpack。打包编译时，可以去掉页面和js中不用的css，这样在使用第三方类库时，只加载用到的类，大大减少css体积optimize-css-assets-webpack-plugin压缩css，优化css结构，方便网页加载和渲染webpack-parallel-uglify-plugin可以并行运行UglifyJS插件，可以有效减少构建时间。开发一个插件Webpack在编译过程中会广播很多事件，比如run、compile、done、fail等，可以查看官网；Webpack的事件流机制采用观察者模式，我们编写的插件可以监听Webpack事件触发相应的处理逻辑；插件中可以使用Webpack提供的很多API，比如读取输出资源、代码块、Modules和依赖等；1.在根目录下编写插件，新建目录my-plugin作为我们编写的插件名称，执行npminit-y命令，新建模块化项目，然后新建索引.js文件。相关源码如下：classMyPlugin{constructor(doneCallback,failCallback){//保存创建插件实例时传入的回调函数this.doneCallback=doneCallbackthis.failCallback=failCallback}apply(compiler){//成功完成一个完整的编译输出过程，会触发done事件事件会被触发compiler.plugin('failed',err=>{this.failCallback(err)})}}module.exports=MyPlugin2.按照上面的方法注册模块，我们使用my-下的npm链接plugin目录导出模块而不发布模块正在开发的本地模块的源代码链接到项目的点头e_modules目录，这样项目就可以直接使用本地的npm模块npmlink然后在项目根目录下执行如下命令将注册到全局项目的本地npm模块链接到项目的node_modules$npmlinkmy-plugin注册成功后，我们可以在node_modules目录下找到对应的插件。3、配置插件在webpack.base.conf.js中添加如下配置插件：[newMyPlugin(stats=>{console.info('编译成功！')},err=>{console.error('编译失败！')})]执行运行或编译命令，可以看到我们的插件可以运行了。推荐文章从零搭建一个webpack项目总结几种webpack打包优化方法总结移动端H5开发常用技巧阅读npm中的前端路由、后端路由、单页应用、多页应用。谈谈JavaScript中的防抖和节流
