手动配置 react、webpack、babel 创建react 应用

[huangshuwei]

前言

截止到 2019年，创建 react 应用大家第一反应就是通过 create-react-app脚手架去创建，这种方式的确也是最简单、最高效的方式。通过脚手架创建的应用，内置了大量需要配置和扩展的功能，让开发者更专注于业务实现。 如果仅仅是满足日常项目开发是足够的，但是如果需要创建 react 组件库、工具路等应用还需要自己手动的创建。 这篇文章将会介绍如何通过手动的配置 webpack、babel、react创建 react应用

文章中依赖包要求

• react 16.x
• babel 7.x
• webpack 4.x
• webpack-cli 3.x
• webpack-dev-server 3.x

初始化项目

细节略...

$ yarn init

webpack 配置

使用目前最流行的打包工具 webpack，发展到现在官方文档也是非常详细了。 安装 webpack

yarn add webpack --dev

安装webpack-cli命令包

yarn add webpack-cli --dev

参考

• Tutorial: How to set up React, webpack, and Babel 7 from scratch (2019)
• webpack doc
• https://webpack.docschina.org/loaders/css-loader/#%E8%B5%B7%E6%AD%A5
• https://webpack.docschina.org/plugins/mini-css-extract-plugin/

未完，待续。。。