8.4 实战演练:使用Webpack构建一个React应用
Webpack是一个模块加载器兼打包工具,能把各种资源,例如脚本(、TypeScript、JSX)、样式(CSS、Less、Sass)、图片(png、jpg、gif)等都作为模块来处理。目前,主流前端开发框架(如React、Vue.js)的官方实例项目均使用Webpack作为工程化工具。
8.4.1 安装和配置
本节会创建一个简单的React项目,并使用Webpack构建开发环境以及打包生产环境所需的静态资源。项目目录结构如图8.10所示。
app文件夹存储打包前的静态文件,里面的文件会被Webpack打包,打包后的文件会存储到public文件夹。
index.js文件是入口脚本文件,内容如下:
import React,{ Component } from 'react'; // 引入react包
import ReactDOM from 'react-dom'; // 引入react-dom包
import Hello from './hello'; // 引入依赖的Hello组件
class App extends Component { // 定义入口组件
render() { // 绘制组件
return (
// 使用Hello组件
)
}
}
ReactDOM.render( // 绘制组件到页面
,
document.getElementById('root')
);
hello.js文件定义了一个React组件,被index.js文件使用,代码如下:
import React,{ Component } from 'react'; // 引入react包
export default class Hello extends Component { // 定义Hello组件并导出
render() { // 绘制组件
return (
Hello World
)
}
}
注意:React的详细使用会在后续章节中介绍,此处只是简单使用。
public文件夹存储需要被浏览器访问到的文件,打包后生成的入口脚本文件也会存储在这个文件夹当中。
index.html是入口页面文件,内容如下:
package.json文件是标准的NPM说明文件,这个文件可以通过NPM命令生成。打开命令行窗口,输入如下命令:
npm init