最近在学react和webpack，语言本身并没有感觉难，就是前边的准备步骤比较繁琐浪费了一些时间，本来想上周写，无奈还要写论文，只好拖到了今天，下面将分享一下从建文件夹到后续的整个步骤供大家参考一下。（希望能经常更博，不要拖延~~~）
1、新建一个空文件夹test。
2、在命令行中进入该文件夹。（test文件夹在f盘中，所以需要先从c盘进入到f盘，再执行cd命令进入到指定文件夹）
3、使用npm init初始化package.json文件。（确保安装了node环境才能用npm）
回车之后会出现package.json文件中的基础配置项，一般默认即可。
4、配置项都填写完毕后，会出现整体的json格式的数据以供检查是否出现错误。没有错误输入yes保存退出即可。
5、在命令行中输入yes后，我们可以看到在test文件夹下有了一个package.json文件。
6、安装webpack。------执行npm install webpack --save-dev
注：npm install webpack是将webpack安装到项目目录下
npm install webpack -g是将模块安装到全局
npm install webpack --save-dev是将webpack安装到项目目录下，并在package文件的devDependencies节点写入依赖
安装成功后，在test文件夹会多出来一个node_modules文件夹，该文件夹用来存放依赖的模块。
7、webpack安装好之后，新建index.html，src/index.js（打包前的代码）、dist文件夹（用来存放打包后的文件）
8、创建webpack.config.js（webpack的基本配置，可以指定入口文件，打包输出，以及需要的loader和plugins等）
const path=require('path');
module.exports={
entry:'./src/index.js',//指定程序的入口文件
output:{//指定打包后的文件路径和名称
path:path.resolve(__dirname, './dist/'),
filename:'bundle.js'
},
module:{},//用来存放依赖的模块
plugins:[],//用来存放依赖的插件
}9、本文使用的是webpack4.25.1，webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development，所以我们可以再pakage.json的scripts中指定执行该命令的简写方式。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development"
},10、由于本文使用的是ES6，需要将ES6进行转码（使用bable）。具体请参考阮一峰大神的这篇文章http://www.ruanyifeng.com/blog/2016/01/babel.html，其中有详细的说明。总的来说，就是1）按照教程安装好不同的包（通过npm下载的包会自动加载package.json中）2）然后在bable的配置文件.babelrc（这个文件需要自己创建）中配置好相关规则，3）最后再将转码命令简化。以下三张截图分别代表了这三个步骤：
这样执行打包的准备工作就已经完成了。我们可以通过npm run build执行转码的操作，通过npm run dev执行打包的操作啦。下一篇会接着介绍如何在此基础上写自己的react代码。