我的react学习之行-01webpack与react环境搭建

最新推荐文章于 2024-07-04 23:58:10 发布

AlexKing阁下

最新推荐文章于 2024-07-04 23:58:10 发布

阅读量223

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/u013983194/article/details/82156544

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

预备自己使用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的组件化思想了，后续再跟大家唠。
新建一个组件文件夹写入