经验！一步步创建react项目并用webpack实现打包

nginx使用配置：react项目打包发布到服务器上

bootstrap grid布局：https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap-grid.min.css

email 正则：/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/

phone正则：/^[0-9]{5,13}$/

一步步创建项目：

项目初始化，生成package.json文件：

npm init,git init/yarn init

安装webpack：（本地）

npm install --save-dev webpack

npm install --save-dev webpack-cli

/yarn add webpack webpack-cli webpack-dev-server -D

打包命令：

webpack

在 webpack4.x 中，有一个很大的特性，就是 约定大于配置   约定，默认的打包入口文件是 src -> index.js

创建webpack.config.js配置文件：

const path=require('path')
module.exports = {
  mode: "development",
  entry: {
    app:path.join(__dirname,'src/index.js')
  },
  output: {
    filename: 'boundle.js',
    path: path.join(__dirname,'dist'),
  },

}

 

安装react 依赖：

yarn add react react-dom

并在src下新建index.html,index.js,App.js文件

安装babel依赖：

yarn add @babel/core @babel/preset-env @babel/preset-react -D
并在src下添加.babelrc文件：

{
"presets":["@babel/preset-env","@babel/preset-react"]
}

将src下的js/jsx 文件转换成es5的形式，要安装bebal-loader依赖：

 yarn add babel-loader -D

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.join(__dirname,'node_modules'),
        use:['babel-loader']
      }
    ],
  },

 

将html也打包：

 yarn add  html-webpack-plugin -D
 

  plugins:[
   new HtmlPlugin({
                    filename: 'index.html',
                    template: path.join(__dirname,'src/index.html'),
                  })
  ]

实现实时刷新 安装webpack-dev-server：

  devServer: {
    hot:true,
    host:'0.0.0.0',
    port:'3000',
    overlay:true
  },

 打包命令：

webpack-dev-server

局部热更新 安装react-hot-loader：

yarn add react-hot-loader -D