webpack打包工具1

接下来我将从使用jQuery的一个实例中出发，总结webpack在webstorm中使用方法：

• 首先我们来建立最基本的项目文件，如下图：
  
  备注：其中webpack-study是项目文件名，src是我门项目中的资源文件，main.js 是项目的入口文件，index.html是项目的首页面。dist是将来我们打包好文件的存放出。

• 接下来我们需要打开终端在当前目录下进行初始化，如下图：
  
  此时在我们的项目下就会多出一个 package.json 的文件，该文件中将会放着我们项目中所用到的全部资源文件信息（包括版本信息等）。

• 我们用到了jQuery，此时我们需要在终端下载jQuery包，如下图：
  
  当项目中出现了jQuery包，并且在package.json中也出现了，则表明jQuery包下载完成，如下图：。
  

• 接下来需在项目中导入webpack工具的相关内容，
  下面两幅图，分别表示安装最新版本的和指定版本的webpack
  
  
  注意：webpack 打包工具的版本不一样，执行操作就不一样，我在这儿踩过坑。我在 cmd 全局中安装的是 3.6.0 低版本，而在项目中安装的是时下最新版本 4.3.0。二者的主要区别是：4.3.0 版本需要下载：npm i webpack-cli -D (-D表示在项目中安装)，而且打包命令不同：
  4.3.0：（1）webpack 打包文件 -o 打包好的文件存放路径 --mode development (表开发模式) （2） webpack 打包文件 -o 打包好的文件存放路径
  
  3.6.0：webpack 打包文件 打包好的文件存放路径
  

• 接下来我们需要在index.html文件中将打包好的文件导入，如下图：
  
  注意：不推荐在这里直接引用任何包和任何css文件，可以把所有文件都写在main.js下，然后通过打包工具整理后，我们只需要导入一个包即可。