webpack4搭建React+react-router+redux+antd项目及优化配置（超级详细）（二）

最新推荐文章于 2020-06-14 13:03:04 发布

dongyong2020

最新推荐文章于 2020-06-14 13:03:04 发布

阅读量3.4k

点赞数 1

分类专栏： REACT 文章标签： webpack4 react antd

本文链接：https://blog.csdn.net/Dyong_1992/article/details/103075946

版权

REACT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack4搭建React+react-router+redux+antd——webpack初始学习

上一节我们创建了最基本的webpack项目，这一节我们使用webpack提供的配置文件定义入口及出口配置，以及在浏览器中打开网页

#定义webpack配置文件
在我们项目webpack-one根目录下创建webpack.config.js配置文件

const path = require('path');

module.exports = {
    // 入口文件
    entry: {
        app: './src/index.js'
    },
    // 定义出口文件路径为dist文件夹, 文件名字为bundle.js
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist')
    }
}

此时我们回到项目根目录, 在命令行里输入：
npm run dev
在这里插入图片描述
看到上述信息表示编译成功，并在dist目录下看到我们已经打包好的bundle.js文件。

现在我们来测试一下打包的文件,在dist文件夹里面新建index.html，并在html中引用bundle.js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script src="./bundle.js"></script>
</body>
</html>

然后用浏览器打开index.html，此时可以看到控制台输出了hello world

接下来，我们正式搭建react项目，首先我们安装React包
npm i react react-dom -S
第一节中已说明警告的含义，对项目无影响可忽略。

由于我们在react项目中会用到ES、JSX语法，但由于部分浏览器目前对ES6、JSX语法不兼容，所以需要使用babel来将其转化为能兼容的js代码。虽然webpack本身就能够处理.js文件，但无法对ES6的语法进行转换，babel-loader的作用就是对使用了ES6语法的.js文件进行处理。
安装babel插件
npm i babel-core babel-loader@7.1.5 babel-preset-react babel-preset-env babel-preset-stage-0 -D
在这里插入图片描述
babel-core——babel核心包
babel-loader——对ES、JSX语法进行转换浏览器可识别的JS代码
因为ES6语法每年都在更新，因此，使用babel-loader我们需要配置相应的规则去对不同阶段的ES语法进行转换。
babel-preset-env——提供解析es的包,智能识别当前运行环境并进行转换的预设规则
babel-preset-react——提供解析jsx包的预设转换规则
编译ES6，我们需要设置presets为"env"，也就是预先加载es6编译的相关模块，如果需要编译jsx，需要预先加载"react"这个模块。而 ”stage-0"是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码
babel-preset-stage-0——es7不同阶段语法的预设转码规则(0-4选装1个即可
在安装babel之后，我们需要使用babel，那么怎么使用呢？首先，我们在webpack.config.js中配置babel

module: {
    rules:[{
         test: /(\.js|\.jsx)$/,
         use:[{
             loader:"babel-loader",
             options:{
                 presets:[
                     "stage-0","env","react"
                  ]
             }
          }],
         exclude:/node_modules/
     }]
}

该配置文件含义为：项目中的.js、.jsx文件由babel-loader根据预设规则转换浏览器可支持的js代码，为了优化转换效率，我们不对node_modules目录下的文件进行转换。
由于后面需要使用antd插件，也需要在webpack.config.js中配置相应的模块。那么当babel配置的参数过多时，我们可以在项目根目录下创建.babelrc的文件存放相关参数信息。

{
    "presets": [ "stage-0", "env", "react"],
    "plugins": [
       "transform-runtime"
    ]
}

后面babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置。

npm i babel-plugin-transform-runtime -D

在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。

接下来，我们更新webpack.cofig.js文件中的babel参数配置

module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: [
                    path.resolve(__dirname,'node_modules')
                ]
            }
        ]
    }

然后修改入口文件index.js，代码如下

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById('root')
)

更新index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>webpack-react</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

然后执行 npm run dev
在这里插入图片描述
我们再次手动打开index.html，这时，我们可以在浏览器页面看到hello world输出。
最后，我们基本的react项目就搭建完成了！