前言在前端开发过程中，尤其是现在前端框架被频繁使用，作为前端开发者，一定要熟悉使用Webpack的使用，尤其是在使用Vue框架作为前端开发的时候，打包的时候一定要用到Webpack。另外，在前端求职面试中，面试官必须考查Webpack相关的知识点，所以本博文将Webpack使用相关的知识点分享出来，记录下来，以备后用。Webpack概念Webpack其实是一个前端资源加载/打包工具，即自动化打包解决方案，也就是模块打包器。它会根据模块的依赖关系进行静态分析，然后根据指定的规则为这些模块生成相应的静态资源。即把在某些浏览器中不能直接运行的扩展程序打包成合适的格式，方便浏览器直接使用。备注：Webpack也是一个打包和模块化的工具。在Webpack中，所有文件都是模块。文件通过loader转换，使用插件注入hooks，最后输出一个由多个模块组成的文件。Webpack打包的原理在项目开发过程中大致分为两种状态：开发状态和生产状态。在这两种状态下，webpack在打包编译时会采用不同的方式，比如代码是否压缩。对应这两种状态，webpack的配置文件也分为两种，一种用于开发时配置，一种用于生产时配置。但是在实际开发过程中，一般不会定义两个配置文件，而是定义三个，即：开发配置、生产配置和公共配置。这样可以更方便地管理webpack，也可以更清楚地区分不同模式下的编译。webpack打包原理：将所有的依赖打包成一个bundle.js，通过将代码分成单元片段按需加载。Webpack核心内容Webpack的核心主要有以下几个部分：mode——模式。development/production模式，根据mode设置mode参数，可以开启对应模式的webpack内置优化。进入——进入。当前项目应该以哪个模块作为构建其内部依赖的开始，即指定打包入口文件。output——输出。设置它创建的输出包，以及如何命名这些文件，默认为./dist。装载机——装载机。让webpack能够处理那些非js文件，因为webpack本身只能识别js。插件——插件。可用于执行更广泛的任务。插件的范围从打包优化和压缩，一直到重新定义环境中的变量。另外，Webpack的主要文件组成：entry入口，构建项目的起点，默认为./src/index.jsoutputexit，打包后的输出位置，默认为./distloader:loader，这样webpack具有加载和解析非JavaScript文件的能力babel-loader：将ES6转换为ES5image-loader：加载和压缩图像文件css-loader：解析CSSplugin：插件，扩展webpack的功能，让webpack具有更大的灵活性。define-plugin：定义环境变量html-webpack-plugin：压缩htmlWebpack安装要安装Webpack，首先要保证Node.js已经安装，因为Node.js自带打包安装工具npm。直接在电脑终端输入命令行：node-v（查看当前node版本，保证node版本大于8.9）webpack打包流程webpack打包流程分为：初始化参数、编译模块、输出资源。模块热更新，修改代码后无需刷新浏览器即可局部更新代码。它是自动刷新浏览器的高级版本。主要是从头到尾会依次执行以下流程：1、全局安装Webpack，首先指定当前安装的版本为3.6.0，因为脚手架3.0依赖这个版本，命令行如下：npminstallwebpack@3.6.0-g2,PartiallyinstallWebpackPartiallyinstallWebpack，开发时依赖--save-dev，开发阶段会用到，项目真正发布运行后不会用到。①在项目中安装部分Webpack。脚手架升级到3.0是Webpack4，配置文件会被隐藏，不方便查看。具体命令行如下：npminstallwebpack@3.6.0--save-dev②通过node_modules/.bin/webpack启动webpack打包。这更复杂。如果想要简单，需要在package.json中定义startup。具体步骤如下：在package.json的scripts中定义执行脚本。package.json中的脚本在执行时，会按照一定的顺序查找命令对应的位置。首先，它会在本地的node_modules/.bin路径下搜索对应的命令。如果没有找到，会继续在全局环境变量中查找。（执行bulid命令：npmrunbuild），文件内容如下：{"name":"wechatui","version":"3.0.0","description":"","author":"","private":true,"scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npm运行dev","test":"nodebuild/test.js","pre":"nodebuild/pre.js","build":"nodebuild/build.js"},"devDependencies":{"webpack":"^3.6.0",}}Webpack设置1.定义webpack公共配置文件webpack的公共配置文件的作用是将开发环境和生产环境的公共配置分开。比如js文件和css文件的编译规则，编译入口文件等。这里有一个简单的公共配置文件：webpack.base.js的例子，具体代码如下：letpath=require("path");letWebpack=require('webpack');module.exports={entry:"./src/index.js",//打包入口文件，默认为src目录下的index.js文件output:{//默认配置文件为dist目录下的main.js文件filename:"out.js",//导出文件路径的文件名:path.resolve(__dirname,"build"),//导出文件路径}}公共配置文件完成后，这个文件一般不会用于webpack的编译，但是在此之上定义了开发环境的配置和生产环境的配置。2.定义开发环境和生产环境的配置文件，需要第三方包：webpack-merge。该包的作用是将两个webpack配置文件合并为一个，用于开发或生产环境的配置。执行以下命令安装包：npmiwebpack-merge安装完成后就可以使用了。比如在webpack.base.js文件的基础上定义开发环境的配置webpack.dev.js，可以使用如下的写法：let{smart}=require("webpack-merge");//引入智能方法letbase=require("./webpack.base.js");//导入公共配置文件module.exports=smart(base,{mode:"development",devServer:{port:3000,//指定开发服务器的端口progress:true,//显示本地启动进度servercontentBase:"./build",//指定本地服务默认打开的目录compress:true,//是否压缩代码},});使用webpack-merge包以配置文件之间作为参数，结合最新的配置参数组成一个新的配置文件。这样可以在项目中将开发配置、生产配置、公共配置分离到不同的文件中，方便项目管理，提高开发效率。提高webpack构建速度在构建前端版本的时候，为了提高webpack的构建速度，可以做以下事情：优化构建时的搜索路径；将不需要打包的插件替换为全局“script”标签导入方式；启用babel-loader缓存；通过外部配置提取常用库。Webpack的优点Webpack的优点有很多，主要有：专注于处理模块化项目，开箱即用，一步到位；具有很强的扩展性和完善的插件机制；它的使用场景不限于web开发；不仅JS可以模块化，scss、TypeScript等也可以模块化。Webpack的缺点Everything有两个方面。有优点就一定有缺点。Webpack的缺点：只能用于采用模块化开发的项目，有很大的局限性。最后通过本文的介绍，让webpack在前端开发中的使用得心应手。这个知识点虽然难，涉及面广，但是很重要，也很常用，尤其是对于刚接触前端开发的开发者来说，所以绝对掌握这个知识点是很有必要的。无论是在实际开发中，还是在前端求职面试中，都是webpack相关的必备知识点，其重要性不再赘述。欢迎关注，共同进步。本文参加了“SegmentFault思维写作挑战赛”，正在阅读的朋友欢迎加入。
