面对日新月异的前端，我表示快学不动了:joy:。 Webpack 老早就已经更新到了 V4.x，前段时间 React 又推出了 hooks API。刚好春节在家里休假，时间比较空闲，还是赶紧把 React 技术栈这块补上。
网上有很多介绍 hooks 知识点的文章，但都比较零碎，基本只能写一些小 Demo 。还没有比较系统的，全新的基于 hooks 进行搭建实际项目的讲解。所以这里就从开发实际项目的角度，搭建起单页面 Web App 项目的基本脚手架，并基于 hooks API 实现一个 react 项目模版。
Hooks最吸引人的地方就是用 函数式组件 代替面向对象的 类组件 。此前的 react 如果涉及到状态，解决方案通常只能使用 类组件 ，业务逻辑一复杂就容易导致组件臃肿，模块的解藕也是个问题。而使用基于 hooks 的 函数组件 后，代码不仅更加简洁，写起来更爽，而且模块复用也方便得多，非常看好它的未来。
webpack 4 的配置
没有使用 create-react-app 这个脚手架，而是从头开始配置开发环境，因为这样自定义配置某些功能会更方便些。下面这个是通用的配置 webpack.common.js 文件。
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const { HotModuleReplacementPlugin } = require('webpack'); module.exports = { entry: './src/index.js',//单入口 output: { path: resolve(__dirname, 'dist'), filename: '[name].[hash].js'//输出文件添加hash }, optimization: { // 代替commonchunk, 代码分割 runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.scss$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true,//css modules localIdentName: '[name]___[local]___[hash:base64:5]' }, }, 'postcss-loader', 'sass-loader'] }, { /* 当文件体积小于 limit 时，url-loader 把文件转为 Data URI 的格式内联到引用的地方 当文件大于 limit 时，url-loader 会调用 file-loader, 把文件储存到输出目录，并把引用的文件路径改写成输出后的路径 */ test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000 } }] } ] }, plugins: [ new CleanWebpackPlugin(['dist']),//生成新文件时，清空生出目录 new HtmlWebpackPlugin({ template: './public/index.html',//模版路径 favicon: './public/favicon.png', minify: { //压缩 removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true }, }), new HotModuleReplacementPlugin()//HMR ] };
接着基于 webpack.common.js 文件，配置出开发环境的 webpack.dev.js 文件，主要就是启动开发服务器。
const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 4001, hot: true } });
生成模式的 webpack.prod.js 文件，只要定义了 mode:'production' ， webpack 4 打包时就会自动压缩优化代码。
const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', devtool: 'source-map' });
配置 package.js 中的 scripts
{ "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" } }
Babel 的配置
babel的 .babelrc 文件， css module 包这里推荐 babel-plugin-react-css-modules 。
react-css-modules既支持全局的css(默认 className 属性)，同时也支持局部css module( styleName 属性)，还支持css预编译器，这里使用的是 scss 。
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", [ "react-css-modules", { "exclude": "node_modules", "filetypes": { ".scss": { "syntax": "postcss-scss" } }, "generateScopedName": "[name]___[local]___[hash:base64:5]" } ] ] }
React 项目
下面是项目基本的目录树结构，接着从入口开始一步步细化整个项目。
├ package.json ├ src │ ├ component // 组件目录 │ ├ reducer // reducer目录 │ ├ action.js │ ├ constants.js │ ├ context.js │ └ index.js ├ public // 静态文件目录 │ ├ css │ └ index.html ├ .babelrc ├ webpack.common.js ├ webpack.dev.js └ webpack.prod.js
状态管理组件使用 redux ， react-router 用于构建单页面的项目，因为使用了 hooks API，所以不再需要 react-redux 连接状态 state 。
<Context.Provider value={{ state, dispatch }}>基本代替了 react-redux 的 ** `。