webpack初步简单涉水

为啥要使用webpack呢？webpack又是啥？

• 没有项目开发经验的你，可以先把他看做是一个日后开发会用到的一个好工具
• 有过开发经验的，应该对他有所了解
• 话不多说，先让我们使用一下

1. webpack的安装

1.1安装之前的工作

• 在你的开发工具中创建一个文件夹，我的是app,在这个文件夹内打开命令窗口，输入指令：npm init
  

  image.png

• 之后 咋们就要开始安装了输入指令npm i webpack --save-dev

*注意：安装完东西的时候，咋们就要检查是否安装成功
输入指令 webpack -v 进行检查 ，之后可能会报错让你安装 webpack-cli (原因是你现在安装的webpack的版本很高了，把webpack *** 的指令全都扔给了webpack-cli,所以你在使用webpack 指令的时候需要安装一下 webpack-cli)

• 若没有安装成功，则请输入这条指令 npm i webpack-cli --save-dev
• 继续用 webpack -v 检查是否安装成功
• 成功则继续往下看就好了，没有成功则继续输入指令 npm i -g webpack-cli
• 这下，进行验证应该就没有什么问题了，如果再有问题，请把自己之前的安装删除之后再彻底走一下上面的安装流程。如果还有问题欢迎交流。

• 成功结果

  
  
  image.png

安装成功之后，我们就开始使用吧！

• 首先在app文件夹内创建一个hello(随意你喜欢的名称).js
• 在app路径下的命令行中输入指令 webpack hello.js -o bundle.js
  
  image.png
• 这个 -o是webpack4的新指令，在随后的的学习中，你就会慢慢的理解的。

这就是初步的使用了，下次的webpack配置，我们再约。一起加油啊！