Webpack系列教程打包一个简单的React应用

Posted 2021-04-29 程序员吧

如何使用webpack，本系列文章，今日开篇，今天来就为大家讲解如何使用webpack来构建一个简单的react应用

webpack时一个打包用于前端打包的应用，可以使用npm来安装

npm install webpack -g

使用-g表示全局安装，这样就可以直接使用webpack命令了

现在就让我们来一步步新建一个简单的React应用，并使用webpack来打包生成线上版本

首先，建立一个文件夹

mkdir lesson_1

进入文件夹中，我们先用npm初始化

npm init

一直回车直到最后提示使用yes确定即可

现在目录下多了个package.json

现在我们来安装依赖包

npm install --save-dev webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react jsx jsx-loader

这里说下几个包都代表什么：

• webpack 我们使用其来打包应用

• react、react-dom 我们使用这两个来渲染视图层

• jsx jsx-loader 我们使用这个来支持jsx语法

• babel-core babel-loader babel-preset-es2015 babel-preset 我们需要用这四个模块来将将es6语法转换成es5语法。

好了，等待npm安装完成后，会发现文件夹内的package.json中增加了刚刚添加的模块依赖

现在，我们来创建一个简单的html页面

touch index.html

然后我们写一个简单的页面

在页面中，引入了一个后面会打包的app.js，其构建前为这个app.jsx

现在我们来建立两个文件夹，dist用来存储构建后的线上版本，src用来存储源码

mkdir src dist

现在我们进入到dist目录中，新建一个app.jsx

我们使用React创建了一个简单的应用，会通过传入的article来显示出一个标题与一个内容，其预览如下：

这个jsx中，我们使用了react react-dom 以及es6语法，jsx语法，现在我们要将其使用webpack构建成一个线上版本

在lesson_1中，我们新建一个webpack的配置文件

touch webpack.config.js

现在我们来编辑配置文件
我们需要在此文件中加入构建的规则。完整配置如下：

这里我们仅仅打包了一个app.jsx文件，其实可以配置多个入口文件，但入口文件仅限于js文件

本章我们仅仅构建了一个js文件，并没有对其他静态资源处理，下一篇我会引入其他静态文件。好了就到这里吧。

点击原文可以查看本教程的完整源码