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

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

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

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

1const path = require('path'); 2 3module.exports = { 4 // 入口文件 5 entry: { 6 app: './src/index.js' 7 }, 8 // 定义出口文件路径为dist文件夹, 文件名字为bundle.js 9 output: { 10 filename: 'bundle.js', 11 path: path.resolve(__dirname,'./dist') 12 } 13} 14 15

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

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

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8</head> 9<body> 10 <script src="./bundle.js"></script> 11</body> 12</html> 13 14

然后用浏览器打开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

1module: { 2 rules:[{ 3 test: /(\.js|\.jsx)$/, 4 use:[{ 5 loader:"babel-loader", 6 options:{ 7 presets:[ 8 "stage-0","env","react" 9 ] 10 } 11 }], 12 exclude:/node_modules/ 13 }] 14} 15 16

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

1{ 2 "presets": [ "stage-0", "env", "react"], 3 "plugins": [ 4 "transform-runtime" 5 ] 6} 7 8

后面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参数配置

1module: { 2 rules: [ 3 { 4 test: /\.(js|jsx)$/, 5 use: 'babel-loader', 6 exclude: [ 7 path.resolve(__dirname,'node_modules') 8 ] 9 } 10 ] 11 } 12 13

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

1import React, { Component } from 'react'; 2import ReactDOM from 'react-dom'; 3 4ReactDOM.render( 5 <h1>Hello World</h1>, 6 document.getElementById('root') 7) 8 9

更新index.html文件

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>webpack-react</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8</head> 9<body> 10 <div id="root"></div> 11 <script src="./bundle.js"></script> 12</body> 13</html> 14 15

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

代码交流 2021