从零开始搭建项目

前提环境： npm   cnpm  

1.初始化项目

npm init

2.根据项目目录环境新建文件夹

script   文件存放webpack  npm运行脚本

src       存放源代码

conf      存放配置文件---webpack等

3.安装webpack

npm install --save-dev webpack

参考官方文档https://webpack.js.org/guides/development/#using-webpack-dev-middleware

配置webpack和express

4.配置babel

参考官方文档http://babeljs.io/docs/setup/#installation

4.1 webpack配置文件中添加

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ]}

4.2 安装babel

npm install --save-dev babel-loader babel-core

npm install babel-preset-env --save-dev

npm install babel-preset-react --save-dev

4.3 创建  .babelrc  配置文件

在根目录中创建配置文件，加入如下代码

{"presets":["env"， "react"]}

5 安装react

npm install react

npm instal  react-dom

6 热更新插件

webpack-hot-middleware插件--基于webpack-dev-middleware，在1中已配置

webpack配置

plugins: [

    new webpack.HotModuleReplacementPlugin(),

]

entry: { app: [ 'webpack-hot-middleware/client?reload=true', './src/index.js' ] },

express配置