webpack实战（巨详细）

先附上官网地址：概念 | webpack 中文网

了解下概念后，一起开始webpack之旅吧

一、开始

首先在安装之前，需要安装node，因为webpack的运行是依赖Node环境的，而且安装了node就相当于把npm也一并安装了，因为node内置了npm。有了npm，就可以下载第三方的包了，也就是说可以通过npm去安装webpack

1、 初始化项目

我在桌面建个项目作为例子哈，先新建一个文件夹来放项目文件，不知道取什么名，就命名 front-test吧，此时它就是个空文件夹。

从终端进入该文件夹，执行npm init命令对项目进行初始化

npm init

如果不想一直按回车，最开始就直接使用 npm init -y 其中 -y就相当于帮你一直按回车了

执行npm init 后，之前空空的文件夹里，现在自动生成一个文件package.json。

package.json 主要是用来记录这个项目的详细信息，它会将我们在项目开发中所要用到的包（所谓包，就是我们常常要引入的文件，如vue，less等等），以及项目的详细信息等记录在这个项目中。

打开package.json它是长这样的哈

2、安装webpack

 终端输入以下命令进行安装：

 npm install  webpack

 如果以前安装过，再执行安装就算更新了（因为我以前安装过）。

安装webpack后的变化如下：

 另外，由于我们安装的webpack版本在4以上，还需要安装webpack-cli

使用命令 npm install webpack-cli安装即可（还有哈，如果不幸你遇到安装慢的话可以使用淘宝镜像进行安装，平时下载还挺快，突然有一次下载贼慢，就试了用了下淘宝镜像）

3、 创建文件 intdex.html 和 index.js

直接在我们的项目frontend-test下 新增index.html 和新增文件夹src，src文件夹里新建文件index.js