使用WebPack4.0配置一个项目

webpack是什么

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

webpack能做什么

image.png

简而言之，就是webpack可以将各种浏览器不可识别的文件打包称可以在浏览器上运行的文件（如js，css，jpg，png）
在项目中我们经常使用ES Moudule的方式模块化引入其他文件

header.js文件 index.js文件

这种方式相信我们在项目中都经常遇到，但是我们在浏览器中打开index.html的时候，意外却发生了：

浏览器报错

反复看了代码没问题呀，究其原因，不是我们的写法有问题，而是浏览器根本就不能识别这种引用方式。所以这个时候，webpack出场了！！！

使用webpack打包

所需环境

node环境

所需依赖

webpack；webpack cli（尽量不要全局安装，以便我们使用不同的webpack版本打包不同的webpack项目）npm install webpack webpack-cli -D

查看局部webpack是否安装成功

npm webpack -v

使用webpack打包某一个文件

npx webpack index.js
此时我们在根目录中多出一个dist文件夹下一个main.js,我们在index.html中将main.js引入，此时我们就使用webpack完整的打包了index.html文件。

关于webpack的更深入的用法，将在简述持续更新！