如何搭建一个基于react、webpack4、babel7的项目（一）
前言
写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模糊，以及据 webpack 官方文档称 webpack@4 的升级，性能得到了极大的提升，而 create-react-app 还是用的webapck@3 ，于是决定从头开始搭建一个适合团队的脚手架。由于近期 babel 也升级到了babel@7, 就顺便把babel 也升级了。
主要依赖及版本
- react@16
- webpack@4
- babel@7
- eslint@5
- prettier@1
- stylelint
- editorconfig
- husky
- lint-staged
react 肯定是必须的，作为主要的js框架。webapck 是本文的重点，核心构建工具就是它。babel 用来把 esnext 语法转成业务场景浏览器支持的语法。eslint 用来规范团队 js 代码风格，主要处理 js 语法问题。prettier 用来格式化代码，以保证团队代码风格一致。stylelint 用来规范 css、less 代码。editorconfig 保证各文件获得一致的文件编码和缩进效果。husky 和 lint-staged 主要做 gitHooks ，在代码提交前做 eslint、stylelint 校验。
这些在后面文章中，都会一个个涉及到，此处不做详细展开。
话不多说，先初始化一个项目
mkdir my-react-app cd my-react-app npm init
安装必要依赖
# react 相关 npm i -S react react-dom # webpack 相关 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin # babel 相关，转换 esnext 到 es5 npm i -D @babel/core @babel/preset-env @babel/preset-react
入口文件
mkdir src public # 创建 src 和 public目录 touch src/index.js # 创建 js 入口文件 touch public/index.html # 创建 html 模板文件 touch babel.config.js # babel@7配置文件 touch webpack.config.js # webpack 配置文件
src/index.js 文件内容
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
awesome react.
</div>,
document.getElementById('root')
);public/index.html 文件内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>my-react-app</title> </head> <body> <div id="root"></div> </body> </html>
babel 配置文件
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', { modules: false }],
'@babel/preset-react'
]
}开始写 webpack 配置文件
// webpack.config.js
// 用来把 js、css 插入 模板html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 开发模式
mode: 'development',
// 入口 js
entry: './src/index.js',
// 产出结果
output: {
// 产出文件名
filename: 'bundle.js',
// 产出目录
path: __dirname + '/dist'
},
// 对各种文件类型（模块）进行处理
module: {
rules: [
{
// 对以 `.js` 结尾的文件使用 `babel-loader` 处理
// `babel-loader` 会自动加载`babel.config.js` 配置文件
test: /\.js$/,
use: 'babel-loader',
// 排除 `node_modules` 目录，不对它做处理
exclude: /node_modules/
}
]
},
plugins: [
// 使 产出结果自动插入 自定义模板 html文件
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html'
})
]
};