webpack是什么

问：webpack是什么？怎么好多项目都在用？

答：webpack的出现是随着前端项目结构演变过程出现的，现在的前端项目基本上都是模块化、包含css预处理、javascript延拓语言等。这些特性能提高开发效率，但也需要额外的进行处理，因为这种处理工具的需求自然而然的出来了。Webpack就是这么个工具，他主要完成模块打包，通过分析项目结构，对js模块和拓展语言进行转换和打包。他的工作方式是：把你的项目当做一个整体，通过给定的主文件开始分析，你项目的所有倚赖文件，使用loaders处理他们，最后打包成为一个或多个浏览器可识别的javascript文件

 

问：怎么安装webpack这个东西？

答：安装很简单直接通过npm就可以。到时候注意区分安装到项目目录还是全局安装，有个小提示，这个一般都是装到项目开发安装目录中。

 

问：安装好之后，怎么用webpack呢？

答：我们先来实际一点，直接拿个以项目打包实例常用命令来入手。假设你已经有了一个vue开发的前端项目，现在想打包。那怎么办呢？直接在项目根目录下直接运行npm run build就能打包了，是的就是这简单。那这里面到底是路数呢？从这个命令开始，npm run XX，这一步是要去package.json文件中的scripts对象去找对应的配置的。在之前的一篇关于package.json的博文介绍中，我们知道scripts这个字段的作用，实际就是脚本别名（缩写）。

事实上，我们知道build对应的是什么命令就行了。他后面的跟的是”node build/build.js”。这条命令实际是node的命令，他是干什么的呢？运行build文件夹下的build.js文件，这里面的内容就是进行打包变异的内容。

然后再来基础一下的，直接使用webpack进行制定目标文件的打包。

分为使用配置文件和不使用配置文件。

【不使用配置文件】

命令:webpack <entry> -o <output>,这个就能实现打包

【使用配置文件】

命令：webpack [--config webpack.config.js] 后面的参数可加可不加，因为默认是加载这webpack.config.js文件的，这个文件里面涉及的内容包括入口文件路径和打包后文件的存放路径。这样就能打包编译了，事实上，配置文件的功能非常强大，这里我们只做打包的讲解，其他的我们日后有时间再说。