模块化工具webpack的基本使用方法

前情提要：webpack可以直接处理js或者json文件，不能直接处理css、img等文件资源；生产环境和开发环境都可以将es6模块化编译成各种浏览器都可以识别的模块化；生产环境比开发环境多一个压缩js代码的功能，在生产环境中更利于我们的学习。
搭建环境所要用到的工具和相关知识点如下图所示：

1、webpack需要被搭建在node的环境中，我们在官网上直接下载node即可。
2、在命令行窗口中进入到用来创建网页文件的总文件夹下。

3、使用npm init 命令在总文件夹中创建一个package.json文件。
4、全局安装webpack的相关文件

5、局部环境下安装webpack的相关文件。

6、在使用jQuery之前使用命令下jQuery下载文件

7、以开发者模式选中src文件夹中的index.js源文件为入口文件并把它输出到指定的文件夹中。

8、以生产者模式选中src文件夹中的index.js源文件为入口文件并把它输出到指定的文件夹中。

9、使用node运行编译后的js文件，我们可以在命令行窗口中直接看到运行结果。

其他的一些小知识点：
1、json的书写规范：

2、在js文件中引入json文件。

3、在js文件中引入css样式文件。

4、在开始的时候我们使用npm init 命令创建的package.json文件的作用：在每一个项目的根目录下我们都需要创建一个package.json文件，这个文件定义了这个项目所需要用到的各种模块和项目的配置信息，其中配置信息包括有名称、版本、许可证等元数据。我们在开发中可以手动编写这个文件，也可以使用命令自动创建这个文件。在本次实验中我们所创建的json文件中相关信息如下图所示：