React 配合 Webpack4 实现 hello world

必须了解的知识：

一、安装Node.js

node.js：https://nodejs.org/en/

无脑安装即可，环境变量是自动添加的，习惯看一下，计算机-系统设置-高级设置-环境变量-Path。

二、使用 node.js 安装三个全局 npm包
npm install -g webpack
npm install -g webpack-cli
npm install -g less  //测试lessc a.less b.css
三、less 插件

npm install --save-dev less-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
测试：

body{
    background-color: aqua;
    @color: #666;
    div{
        width:200px;
        height:200px;
        background-color: @color;
        border: 1px solid #333;
    }
}
//main.js 
import "./a.less"
四、babel 插件一共五个

npm install --save-dev babel-core@6 babel-loader@7 babel-preset-env babel-preset-react babel-plugin-transform-object-rest-spread

这里有两个插件不能安装最新的版本，因为兼容问题会与最新版的 webpack4 发生兼容问题，所以的指定版本。就是这两个：babel-core@6 和 babel-loader@7

五、安装react的依赖

npm install --save react
npm install --save react-dom

六、补充

首先我们在引入内部文件的时候，工作时，通常喜欢省略扩展名。比如：
import App from "./App.js";
可以省略为
import App from "./App";

我们还有一个需求，就是 Index.js 这个组件，我们希望可以省略：
import Foo from "./foo/Index.js";
现在可以省略为：
import Foo from "./foo";

打开 webpack 的官网，看手册。 https://www.webpackjs.com/configuration/

配置如下：

    resolve: {
        //自动解析确定的扩展。默认值为：
        extensions: [".js", ".json", ".jsx", ".css"],
        //解析目录时要使用的文件名。默认：
        mainFiles: ["index","Index"]
    }
七、启动
//webpack.config.js
var path = require("path");

module.exports = {
    mode:"development",
    entry:"./js/main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"all.js"
    },
    watch:true,
    module:{
        rules:[
            {
                test:/\.less$/,
                  use: [
                    {
                        loader: "style-loader"  // creates style nodes from JS strings
                    }, 
                    {
                        loader: "css-loader"        // translates CSS into CommonJS
                    }, 
                    {
                        loader: "less-loader"   // compiles Less to CSS
                    }
                    //上面的另一种写法
                    //use: ['style-loader', 'css-loader','less-loader']
                ]
            },
            {
                test: /\.m?js$/,//匹配.mjs和.js结束的文件
                exclude: /(node_modules|bower_components)/,
                use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['env','react'],
                        plugins: ["transform-object-rest-spread"]
                    }
                }
            }
        ]
    },
    resolve: {
        //自动解析确定的扩展。默认值为：
        extensions: [".js", ".json", ".jsx", ".css"],
        //解析目录时要使用的文件名。默认：
        mainFiles: ["index","Index"]
    }
}

重点： 千万注意不要更改下面三个 loader 的引用顺序，改了就无法正确解析 less 了，我配置文件的时候也是从官网上复制的，没想到帮同学配置的时候，让他手写的结果，编译less 的时候一直出错。换了顺序才弄好。所以配置文件最好不要手写，但是一定能达到手写的标准。

{
    test:/\.less$/,
      use: [
        {
            loader: "style-loader"  // creates style nodes from JS strings
        }, 
        {
            loader: "css-loader"        // translates CSS into CommonJS
        }, 
        {
            loader: "less-loader"   // compiles Less to CSS
        }
    ]
}
八、实现一个 hello world
  • main.js 文件
//不熟练的话文件一个不能改
import "./a.less";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>hello world!</h1>,
    document.getElementById("box")
);
  • 最后的效果静态页面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 起步 </title>
</head>
<body>
    <div id="box"></div>
    <script src="dist/all.js"></script>
</body>
</html>

  • 浏览器打开 index.html 页面


    最后的效果
九、解决兼容问题

因为 babel 对第七个版本进行了很大的升级所以，我们安装的插件有点不对，才会导致与最新的 webpack 有兼容问题，接下来我们来看看最新的安装方法。
npm install --save-dev @babel/core @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-react babel-loader

与上面的 babel 安装方法比较就发现不同了。唯一需要注意的是babel-loader 安装方法没发生改变。我也不明白其他的 babel 安装方法都变了只有这个没变这个没变。等我们安好了，再修改一下配置文件。

options: {
    presets: ['@babel/preset-env','@babel/preset-react'],
    plugins: ['@babel/plugin-proposal-object-rest-spread']
}

修改配置完成在 npm run dev ，大功告成。

我们写的程序都是直接通过 webpack 打包生成本地文件，也就说每次执行这个命令都得进行硬盘的读写，这无疑是很大的伤害，而且我们写的程序肯定还的发出 Ajax 请求，而这必须在服务器上。这时 webpack-dev-server 登场了。

安装：
npm install -g webpack-dev-server

更改配置文件有三处：

// var path = require("path");
// 使用webpack-dev-server 就不需要path
output:{
        // webpack要求的输出路径
        // path:path.resolve(__dirname,"dist"),
        // webpack-dev-server的虚拟输出路径
        publicPath:"virtual",
        filename:"all.js"
  },
// webpack-dev-server 动态实时更新不在需要watch:true;
    // watch:true,

改完之后去 index.html 把引包的文件路径变成现在 virtual 的文件路径。
配置完整的 webpack-config.js

//webpack.config.js
// var path = require("path");
// 使用webpack-dev-server 就不需要path

module.exports = {
    mode:"development",
    entry:"./App/main.js",
    output:{
        // webpack要求的输出路径
        // path:path.resolve(__dirname,"dist"),
        // webpack-dev-server的虚拟输出路径
        publicPath:"virtual",
        filename:"all.js"
    },
    // webpack-dev-server 动态实时更新不在需要watch:true;
    // watch:true,
    module:{
        rules:[
            {
                test:/\.less$/,
                  use: [
                    {
                        loader: "style-loader"  // creates style nodes from JS strings
                    }, 
                    {
                        loader: "css-loader"        // translates CSS into CommonJS
                    }, 
                    {
                        loader: "less-loader"   // compiles Less to CSS
                    }
                    //上面的另一种写法
                    //use: ['style-loader', 'css-loader','less-loader']
                ]
            },
            {
                test: /\.m?js$/,//匹配.mjs和.js结束的文件
                exclude: /(node_modules|bower_components)/,
                use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env','@babel/preset-react'],
                        // @babel/plugin-proposal-object-rest-spread翻译高级ES的...
                        // @babel/plugin-transform-runtime翻译高级ES的带星函数即Generator
                        plugins: ['@babel/plugin-proposal-object-rest-spread','@babel/plugin-transform-runtime']
                    }
                }
            }
        ]
    },
    resolve: {
        //自动解析确定的扩展。默认值为：
        extensions: [".js", ".json", ".jsx", ".css"],
        //解析目录时要使用的文件名。默认：
        mainFiles: ["index","Index"]
    }
}

这时我们在运行，只需要输入 webpack-dev-server 就能看到如下结果：



根据提示可知我们的文件跑在本地服务器的 8080 端口。

浏览器地址栏输入http://127.0.0.1:8080/ 或 http://localhost:8080/ 即可查看到结果。

这时我们会发现本地没有要生成的文件，但程序还是成功运行了，这是因为
webpack-dev-server 没有对硬盘读写，而是把文件放到了内存里面。在浏览器的地址栏可以输入网址：http://localhost:8080/virtual/all.js 即可查看到生成的 js 文件。不仅如此文件是一直挂起的，只要改动视图浏览器自动更新。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,837评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,551评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,417评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,448评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,524评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,554评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,569评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,316评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,766评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,912评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,560评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2赞 352

推荐阅读更多精彩内容