如何搭建一个基于react、webpack4、babel7的项目（一）

IamDLY 发布于2019-08-23 12:30 / 450人阅读

摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。

前言

写前端项目这么久了，以前用的 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(
  
    awesome react.
  ,
  document.getElementById("root")
);

public/index.html 文件内容




  
  
  
  my-react-app

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"
    })
  ]
};

结果

云服务器海外云主机如何搭建一个自己的服务器基于webrtc的项目基于webrtc的开源项目如何搭建一个网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98634.html

基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
手动创建基于webpack+babel的react应用(babel7)

摘要：搭建一个项目环境首先生成文件至此我们就可以安装的相关依赖了。下的依赖核心部分，把转化成外部引用辅助函数和内置函数，自动填充代码而不会污染全局变量。入口文件我在中配的，所以在下新建文件，添加我们的第一个组件。搭建一个React项目环境首先npm init生成package.json文件.至此我们就可以安装react的相关依赖了。 npm install react --save np...

alaege 2019-08-23 15:20 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0