webpack4.0从入门到遁入空门

webpack目前已经更新到4.8.3了，5.0指日可待，所以这篇文章后期应该会不停的修改更新webpack的最新语法

什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

这是官网给出的解释,实际上就是一个类似于gulp的模块化管理和打包工具，把一些浏览器不能支持的语法解析为浏览器可以支持的语法，同时可以压缩打包代码，让写代码变得容易起来。

如何安装webpack

webpack仍然是基于nodejs环境运行的，所以直接npm install webpack -D和npm install webpack-cli -D就可以了

注意不要将webpack下载到全局，后期会出问题

如何使用webpack

当你下载好一切的时候我们就可以开始使用它了。 首先，需要创建一个文件夹，里面放你的项目，在与你的项目同级的文件夹里面创建一个js文件，命名为webpack.config.js,这个文件就是webpack的配置文件，整个webpack的配置也是在这里面完成的

webpack入门开始

由于webpack的语法规定，我们所有的配置都写在

   module.exports={

   }

这个大括号里面，语法有没有很眼熟？没错，就是nodejs模块化抛出的语法，你问我为什么要这样写？我也不知道webpack的语法规定

其中的第一个参数为mode,是决定webpack模式的关键，不写的话不会报错，但是会提醒，建议加上，参数一共有两项

development 开发环境配置，如果出现错误，会告诉你错在了第几行代码上

production 线上环境配置，不会报错

我们先把这个参数写上

   module.exports={

       mode:'development'//作为一个励志成为程序员的码农当然需要的是开发环境了，注意用字符串格式

   }

第二个参数是入口文件的路径entry，就是我们项目中的入口文件，我在项目的文件下创建了一个index.js作为我的入口文件，加上入口文件的配置

   module.exports={