webpack4搭建react开发环境
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(Hello, world!
, document.getElementById('root'));
创建public文件夹，添加index.html文件，这是上面webpack.config.js中配置的 html-wepack-plugin的模板
// index.html
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack-reacttitle>
head>
<body>
<div id="root">div>
body>
html>
src文件夹下添加 index.css 样式文件，
/* index.css */
h1 {
color: blue;
}
直接在终端中执行 npx webpack 就可以在dist文件夹中看到webpack打包编译的输出结果了。
在浏览器中直接打开 dist文件夹下的index.html 就可以看到输出结果了，hello world。
这样最基本的开发环境就搭建完成了 。
使用webpack-dev-server
终端中执行npx webpack-dev-server --open 会自动打开浏览器。看到效果。
HTML，CSS，JavaScript 都有了自己的处理程序。好了完事。