前言
写前端项目这么久了,以前用的 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'
})
]
};