React+webpack搭建前端开发环境（一）

申明：本文定有诸多不足之处，欢迎指正，希望有兴趣的同学一起学习讨论！使用webpack打包web项目：(请先安装node.js，visual studio code代码编辑器 )

1. 在任意目录下创建项目的文件夹；我的 F:studyphotoAlbum
2. 在该目录下启动cmd命令行工具；使用shift+右键->在该目录下启动cmd
3.  npm init 
    a. 下来填写相应信息，
    b. 必要字段填，不必要字段回车即可
    c. 最后敲入yes ；生成package.json
    d. Package.json的内容大致如下；

4. 接下在该目录下新建项目的主要目录我的目录大概如下

看到没，package.json就是刚刚生成的，
    App文件夹为打包后的输出目录，这里边的文件不需要我们手动创建，全部是配置好之后webpack输出的；
    client用于存放前端代码；
    Server后边可能用于存放模拟后台的代码

5. 接下来我们要用npm在该项目中安装一些模块，这些模块在开发中要用到，比如一般项目中：
webpack， babel， style-loader，css-loader file-loader， html-webpack-plugin，url-loader， webpack-dev-serve， 其他如果你要用react编写程序，那么还得安装下边这些东西:react,react-dom;react-redux,react-router-dom,redux,styled-componentd等等，这些是开发中要使用的基本的安装包，具体在后续开发使用到什么就安装什么，
使用： npm install webpack –save（可以使用该命令一个一个安装，也可以全写在package.json中，然后执行npm install命令安装）（如果npm安装太慢，可使用淘宝镜像cnpm安装，可以去搜一波它的安装与使用，基本与npm相同）
Ok 如下图，我先安装了一个，注意package.json中的变化；

然后在该目录下多出一个node-moudels文件夹，里边就是安装的这些模块的鬼东西；

6. 接下来在photoAlbum目录下新建webpack.config.js;怎么说呢，这个文件就是告诉webpack它应该做的事情；该文件的内容大致如下：可以直接抄写，下边是图片内容（注意：一张图片放不下，用了两张图片。注意抄对）


看到没：上边就用到了我们在第五步中安装的模块webpack，html-webpack-plugin等；
关于webpack.config.js的配置学习一个超给力的学习地址：
https://doc.webpack-china.org/configuration/dev-server/
7. 在第六步中有两个要注意的地方：index.js和index.html;
js文件是入口文件必须的，html是webpack打包中必须的文件（相当于提供一个容器）；
所以在client文件夹中，新建如下文件，

他们的内容大致如下：


就是这么简单
8. 在package.json文件中添加如下命令：

让项目使用webpack打包，且在8080默认端口跑起来；
9. 在cmd命令窗口输入 npm run build 回车打包；

编译成功

运行npm run dev

运行成功：

在页面输入http://localhost:8080/：

之后可以在index.js中开始编写前端代码，例如，加入路由，登录界面，主界面等；具体看下回分解；

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!