React—用webpack一步一步搭建react项目

React—用webpack一步一步搭建react项目

1、npm init -y

2、cnpm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server -D
// 安装webpack 脚手架，插件， 配置服务器所需的东西

3、新建src文件夹加存放源码
新建app.js写jsx（类似html和js的混合）
新建index.html写根文件 // 类似vue中的app根节点

4、新建webpack.config.js文件

const path = require('path');
const HtmlWebpckPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    plugins: [
        new HtmlWebpckPlugin({
            template: './src/index.html' // 实例化
        }),
        new CleanWebpackPlugin() // 重新打包时删除上一次打包文件
    ],
	 devServer: { // 服务器运行
      contentBase: './dist',
open: true // 自动打开浏览器
  },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './dist')
    }
}

5、package.json的scripts配置

"scripts": {
  "build": "webpack”,
  "dev": "webpack-dev-server"
}

6、npm run build 打包 npm run dev弹出浏览器可以实时监控更改

babeles6转es5 polyfill按需引入

7、cnpm install --save-dev babel-loader @babel/core

8、webpack.config.js增加
与output同级

module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader' , 'less-loader' ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除，不解析
                loader: "babel-loader" // 中间介质，用来调用babel/preset-env
            }
        ]
    },

9、cnpm install @babel/preset-env --save-dev
cnpm install --save @babel/polyfill
cnpm install --save-dev @babel/preset-env
cnpm install --save-dev @babel/runtime-corejs3
cnpm install --save-dev @babel/plugin-transform-runtime
cnpm install --save @babel/runtime

10、新建后缀名为. babelrc的文件并写入

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

react

11、cnpm install react react-do —-save
cnpm install --save-dev @babel/preset-react
// 因为浏览器不识别，所以要用babel转一下

12、.babelrc的presets数组中添加
[
“@babel/preset-react”
]

13、webstorm偏好设置 语言&框架 JavaScript version React jsx

14、main.js写jsx（js和html的混合）

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(
    <div>hello world</div>, // 注意逗号
    document.getElementById('root')
)