手把手教你使用Webpack打包React项目

什么是Webpack？

   webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。

先来认识一下webpack的基本配置

现在开始搭建开发环境

第一步：在react-music-player文件目录下，执行npm init创建package.json文件。

这时，代码当中的配置文件就已生成啦：

第二步：现在配置文件中还没有dependencies，这时运行npm install react --save就会添加react依赖，使用--save会自动的把依赖添加到package.json的dependencies中。

同时，依赖的具体文件放在node_modules中。

可以看到，同时也生成了一个 package-lock.json 文件， package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依