什么是webpack，为什么要用webpack？干货，这里是一个简单的webpack配置为什么要使用webpck现在很多网页其实都可以看成是功能丰富的应用，里面有复杂的javaScript代码和大量的依赖包。为了简化开发的复杂性，前端社区出现了很多好的实践方法。模块化使我们能够将复杂的文件简化为小文件。类似于TypeScript这种基于JavaScript的开发语言，我们可以实现当前版本的javaScript不能直接使用的特性，后期可以转成javaScript文件，让浏览器少识别Scss等CSS预处理器。这些改进确实大大提高了我们的开发效率，但是在使用它们开发的文件时，往往需要额外处理才能被浏览器识别，手动处理非常繁琐，这就为webpack工具的出现提供了需求。什么是网页包？Webpack可以看作是一个模块打包器。它的作用是分析你的项目结构，找到Javascript模块和其他浏览器不能直接运行的扩展语言，打包成适合浏览器使用的格式。与Grunt和Gulp相比，Webpack有哪些特点？太多可比性了，Gulp/Grunt是可以优化前端开发流程的工具，而webpack是模块化的解决方案，但是webpack的优势在于Webpack可以替代Gulp/Grunt工具Grunt和Gulp的工作方式：在配置文件中，指定执行某些文件的编译、组合和压缩等任务的步骤。然后这个工具就可以帮你完成Webpack。工作方式是：把你的项目当成一个整体，通过给定一个你项目的主文件，Wenpack会从这个文件开始寻找你项目的所有依赖文件，使用loader进行处理，最后打包成一个javascript可识别的文件。webpack处理更快更直接。开始使用webpack安装webpack。最好使用全局安装）//全局安装npminstall-gwebpack//本地安装npminstall--save-devwebpack官方使用webpack之前的准备工作，在当前文件夹下创建一个package.json文件，这是一个standardnpm描述文件包含丰富的信息，包括当前项目的依赖模块，自定义脚本任务等，在终端使用npminit自动创建这个文件npminit//输入这个命令后，终端会问你一个一系列的问题。项目名称、项目描述、作者等信息，不过不用担心，如果你不打算在npm中发布你的模块，这些问题的答案并不重要，默认的package.json文件已经准备好了，我们将在这个项目中安装webpack作为依赖包，在根目录下创建两个空文件夹，一个用来存放我们编写的文件，一个用来存放webpack打包后的数据。项目目录结构如下：正确使用webpack在终端中使用最多基本命令为：webpack{entryfile/entryfile}{denstionationforbundledfile/exportfile}上面的高版本webpack命令不是适用，是webpack{entryfile/entryfile}{denstionforbundledfile/exportfile}webpackdata/main.js-owebpack-data/main.bundle.js只需要指定一个entry，webpack会自动识别项目所依赖的文件。没有全局安装webpack时，需要进入webpack的打包文件夹打包node_nodules/.bin的结果如下：dist下的文件是直接为项目运行的文件。如果项目要放在服务器上，直接把dist文件放在上面即可。至此，webpack已经成功打包了一个文件，但是我们还是觉得很麻烦，请看下面通过配置文件来使用webpack题。意思很简单，就是我们能不能用npm命令来执行我们想要的打包。不仅如此，我们还希望webpack更高级的功能（loader和plugins）可以通过一个命令来完成。既然这样，那我们为什么不定义一个配置文件呢，我们只要把我们要做的一切都放在里面，然后当我们执行命令的时候，它会自动帮我们弄清楚具体的方法：新建一个名为webpack.xml的文件。根目录下的config.js，按照规范把我们要做的都放上去。一个简单的配置如下：//_dirname是nodejs的一个全局变量，指向当前执行脚本所在的目录js",//打包文件的位置和文件名output:{path:_dirname+"/webpack-data",filename:"main.bundle.js"}}构建完这个文件后，我们只需要运行webpackin终端打包文件，但我们不会仅仅满足于此，所以我们使用npm来引导任务执行，配置好之后，只需要一个简单的npmstart命令就可以打包了。在package.json中设置npm脚本部分如下：{"scripts":{"start":"webpack"//相当于将npm的启动命令指向webpack命令}}注：package.json的脚本默认添加了部分包启动路径，这里不用写详细的路径汇总，不管是全局的还是本地的。这是我的终端将输出的信息。很多时候，只要达到了目的，其他的我们可能并不关心（虽然我也是），但是我纠结了一下，然后查看了输出信息的含义；versiontimewebpack版本打包花费的时间AssetSizeChunkschunkNames打包生成的文件所花费的时间。打包的块包名称中也有黄色警告。显然，这也会让我们不开心。让我们坚持不懈，赢得最后的胜利。上面我们可以看到原来我的webpack版本是4.27.1。那么这个问题就解决了。百度下，这个警告出现在webpack4中。百度后发现webpack4引入了一个模式，有三种状态，开发模式-生产模式-无。我们没有设置模式，所以我们可以去我们的packjson并设置它。最后为了简单起见，开发模式不压缩代码，生产模式压缩代码。一直觉得“学有所长，艺有专攻，仅此而已”，所以在求知的道路上一直在求知与实践中挣扎，还望各位大佬指教.
