我的react学习之行-01webpack与react环境搭建
Posted AlexKing阁下
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的react学习之行-01webpack与react环境搭建相关的知识，希望对你有一定的参考价值。
前言
预备自己使用webpack与react搭建前端与后端分离的博客系统,在这个git上记录我所有的步骤，以便自我学习与总结
基础环境
node/npm
webpack
用于打包的工具，目前使用的是4.0
npm install webpack webpack-cli --save-dev
这就是安装webpack,当然4.0开始在打包时需要安装cli，注意–save-dev就是安装在开发模式下的支援包，具体可以直接去看package.json这个文件又增加了什么
react与babel
首先安装react与react-dom，而且是浏览器中必须依赖的，因而后面要加–save
npm install react react-dom --save
此时，可以看到package.json中
"devDependencies":
"babel-cli": "^6.26.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
,
"dependencies":
"react": "^16.7.0",
"react-dom": "^16.7.0"
很明显dev开头的就是我们的开发模式。而dependcies就是我们正常的依赖，所以在此可以知道加–save-dev与–save的区别了。
es5与es6
随着javascript的发展，语法有了越来越多的新特性，但是你的浏览器就不一定是支持最新特性的代码，那么babel就应运而生，用于进行es6转换成es5,如es6中的箭头函数就会被转化成es5可以认识的函数等等。
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
由于我使用的是webstorm进行编辑的，那么可以使用babel官网提到的cli，具体请点链接
npm install --save-dev babel-cli
主要直接用命令行转码。
配置并启动babel
别忘了配置Babel！在项目文件夹中创建一个名为 .babelrc 的新文件
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": []
在config创建一个名为 webpack.config.js 的文件，写入
const path = require('path') //用于得到绝对路径
const config =
entry:
blog:path.resolve(__dirname,'../src/app.js') //入口的源代码
,
output:
filename:'[name].js',
path: path.resolve(__dirname,'../output'),//输出的源代码
//publicPath:''
module.exports = config//这个一定不能忘记加
这样就是webpack最简单的打包工程。
那么还需要的是如何运用babel-loader将js文件自动适配，于是在webpack.config.js中就需要创建一个规则来做这件事情。在webpack.config.js添加：
output:
filename:'[name].js',
path: path.resolve(__dirname,'../output'),//输出的源代码
//publicPath:''
,
module:
rules:[
test: /\\.js$/,
exclude: /node_modules/,
use:
loader:"babel-loader" //使用babel-loader将es6转换成ES5语法
]
,
此时已经可以把babel-loader用起来，让webpack可以识别js文件并通过babel-loader识别转换
package.json添加webpack打包命令
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"build": "webpack --config config/webpack.config.js --mode development",
"release": "webpack --config config/webpack.config.js --mode production"
,
分别执行两个操作，你会发现main.js不同的变化。production模式下，默认对打包的文件压缩，打包更小。development模式下，对打包的文件不压缩，同时打包的速度更快，webpack更新的优点就在这里。
如果没有指定任何模式，默认为production模式。
注意：–config 配置文件路径，字符串格式，默认是根目录下的 webpack.config.js 或 webpackfile.js，
html-webpack-plugin 和 html-loader
要显示React的页面，我们必须告诉Webpack生成一个HTML页面,同时将生成的打包出来的js将放在 标签内。这就需要webpack的插件html-webpack-plugin了
npm i html-webpack-plugin html-loader --save-dev
首先我们先创建一个模版文件index.html，放在public文件夹中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>New React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
可以看到我们的div组件中的id为root，目标就是替换掉这里面的内容。
，那么首先得知道如何使用这个插件。
在webpack中申明插件
const HtmlWebPackPlugin = require("html-webpack-plugin");
在webpack中添加插件配置
plugins:[
new HtmlWebPackPlugin(
// title:"",//设置生成的html文件的标题
filename: path.resolve(__dirname,'../output/index.html'),//生成的html文件名
template: path.resolve(__dirname,'../public/index.html'),//根据自己指定的模版文件生成特定的html文件
favicon: path.resolve(__dirname,'../static/favicon.ico'),//属性值为favicon文件所在的路径
)
],
具体可以参考本文
同时还要注意在webpack中的model rule，打包的时候要认到html文件，就需要使用html-loader
test:/\\.html$/,
use: [
loader: "html-loader",
options: minimize:true
]
minimize指是否要缩，这个去掉就是原来没有压缩过的html。
添加react源码
环境都已经准备好了，那么现在要做的是将react建立起来，在目录下建立src文件夹用于存放react源码。
还记得我们在webpack的配置吗？在配置其入口函数的时候，entry所用的就是index.js,所以在这里新建index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
在这里我们可以看到源码中去找的是dom中的root，即html中的div组件id。
而真正的入口函数在app.js
import React, Component from 'react';
class App extends Component
render()
return (
<div>
helloword!
</div>
);
export default App;
于是一个helloworld正式可以用了。
webpack-dev-server
如何进行自动的debug是我们开发周期中需要运用到的，特别是前端，我们先要看效果。而且每次都编译一遍实在是效率低下，于是产生了一个新的插件。
npm i webpack-dev-server --save-dev
那么如何设置呢。可以参考官方网站
devServer:
contentBase:path.resolve(__dirname,'../output'),
compress:true,
port:8000,
host:'127.0.0.1',
hot:true,
overlay:
errors: true
,
在package.json中添加命令
“start”:“webpack-dev-server --config config/webpack.config.js --mode development --hot --inline”
注意，因为webpack-dev-server是直接找当前内存中的
import React, Component from 'react';
import './style.css';
import Header from '../../components/Header/Header';
import Menus from '../../components/Menus/Menus';
import 'antd/dist/antd.css';
class Home extends Component
render()
return(
<div className='container' >
<Header/>
<div className="nav">
<Menus />
</div>
<div className="main">
这里是文章列表
</div>
</div>
);
export default Home;
上面是我写好的代码，来解析一波。
首先我们得设计一个header。header属于一个组件，在这里不详细说react的组件化思想了，后续再跟大家唠。
新建一个组件文件夹写入
以上是关于我的react学习之行-01webpack与react环境搭建的主要内容，如果未能解决你的问题，请参考以下文章