webpack4搭建react开发环境

最新推荐文章于 2021-07-13 10:24:32 发布

undeflined

最新推荐文章于 2021-07-13 10:24:32 发布

阅读量406

点赞数

分类专栏： # webpack

本文链接：https://blog.csdn.net/qq_15601471/article/details/106525712

版权

webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

webpack

webpack demos

环境、工具的准备：

git，node，vscode

关于git：git使用手册

关于node：nvm和nrm的安装使用，window版本的安装在文章末尾。

nvm 用来管理node版本，
nrm用来管理 npm的registry

环境的准备

创建一个文件夹

创建一个webpack-react文件夹，并在vscode 中打开。
git初始化

通过 Ctrl+` 打开终端，执行 git init
添加 .gitignore 文件，用来让git知道忽略那些文件，暂时是空的。
npm 初始化

npm init -y

安装webpack，babel，react等

安装webpack

npm i -D webpack webpack-cli webpack-dev-server
处理html的插件

npm i -D html-webpack-plugin
安装babel处理js

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i -S core-js
处理css相关的loader

npm i -D css-loader style-loader
安装react

npm i -S react react-dom

这个时候，我们要把node_modules 这个文件夹添加到 .gitignore文件中中去，因为node_modules中的文件并不需要我们用git控制，里面有很多文件。

// .gitignore
node_modules

安装完成之后的

// package.json
{
  "name": "webpack-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

babel-loader ：webpack loader用于加载并处理js文件

@babel/core：将js的最新语法转译为ES5等，只转换语法，比如箭头函数，class语法，

@babel/preset-env： @babel/core的一组插件预设

@babel/preset-react ：把react 的jsx 编译成js

core-js 提供垫片如 Promise Array.fill 等方法

配置webpack 和babel

配置babel
添加 .babelrc

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

配置webpack
添加webpack.config.js

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

webpack 暂时只需要增加这些配置，其它一切先使用默认值即可。

开始

创建src 文件夹，添加index.js 文件这是webpack 的默认入口。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

创建public文件夹，添加index.html文件，这是上面webpack.config.js中配置的 html-wepack-plugin的模板

// index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack-react</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>