Webpack+Babel+React手动搭建React脚手架

Webpack+ES6+Babel+React手动搭建React脚手架

未完,持续更新

必备知识储备:

nodejs: http://nodejs.cn/api/

npm: https://www.npmjs.cn/

webpack: https://www.webpackjs.com/concepts/

Babel: http://www.ruanyifeng.com/blog/2016/01/babel.html

一、npm初始化项目

mkdir react-cli
cd react-cli
npm init -yes 或者 npm init -y // 这里是简写 
当然你也可以  npm init 自定义配置内容

会在根目录下面看到一个 package.json 文件

二、安装项目依赖包

cnpm install -g webpack webpack-cli

// 建议按照如下版本安装,本教程采用最新npm时出现若干不可预期的错误。
cnpm install -D babel-core@6.26.3 babel-loader@7.1.5 babel-preset-env@1.7.0 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1 webpack webpack-cli

cnpm install -D babel-preset-stage-2 babel-plugin-transform-runtime

cnpm install -D html-webpack-plugin webpack-dev-server

cnpm install -D react react-dom react-router react-redux
npm包用途
babel-corebabel转译器本身,提供了babel的转译API
babel-loader用于转换ES6语法,webpack调用API完成转译
babel-preset-stage-2不同时段的转码规则
babel-preset-env根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为ES5
babel-preset-es2015代码转换为ES5
babel-preset-react用于解析 JSX 语法
webpackwebpack基础依赖包
webpack-cliwebpack脚手架
html-webpack-plugin打包HTML文件
webpack-dev-server启动nodejs服务器
reactReact核心主程序
react-domReact DOM 程序
react-routerReact 路由管理
react-reduxReact 状态管理

三、构建文件目录

mkdir src
touch src/index.js
mkdir public
touch public/index.html
touch webpack.config.js
touch .babelrc

结构如下:
│  .babelrc
│  package.json
│  webpack.config.js
│  
├─public
│      index.html
│      
└─src
       index.js

四、配置 webpack.config.js文件

const config = {
    // ...options
}
module.exports = config

1、模式 mode: 详细配置见:https://www.webpackjs.com/concepts/mode/

mode: 'development' // webpack --mode=production

2、入口文件:详细配置见:https://www.webpackjs.com/concepts/entry-points/

// 此教程,我们这么写
entry: { // string | object | array
  app: "./src/index.js" 
},

拓展:

entry 属性的单个入口语法,是下面的简写

entry: {
  main: './path/to/my/entry/file.js'
}

分离 应用程序(app) 和 第三方库(vendor) 入口

entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
}

多页面应用程序:

  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }

3、输出文件: 详细配置见:https://www.webpackjs.com/concepts/output/

// 此教程,我们这样写
output: {
  filename: "[hash].bundle.js", 
  path: path.resolve(__dirname, 'build')
},

占位符(substitutions)确定名称: https://www.webpackjs.com/configuration/output/#output-filename

4、loader: 详细配置见: https://www.webpackjs.com/concepts/loaders/

我们的目标是 ES6 或者 ES6+ 转化为 ES5,以及 JSX 语法转化为ES5 语法,首先我们配置这些loader

// 此教程,我们这样写
module: {
  rules: [
    {
      test: /\.js|jsx$/,
      use: ['babel-loader'],
      exclude: /(node_modules|bower_components)/,
      options: {
        presets: ["env"]
      }
    }
  ]
}

5、devServer 启动nodejs服务器,详细见:https://www.webpackjs.com/configuration/dev-server/

// 此教程,我们这样写
devServer: {
  contentBase: path.join(__dirname, "public"),
  historyApiFallback: true,
  inline: true,
  hot: true,
  port: 3000,
}

6、devtool: 详细见: https://www.webpackjs.com/configuration/devtool/

devtool: 'inline-source-map',

webpack.config.js

const path = require("path")
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  mode: "development",
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[hash].bundle.js",
    path: path.resolve(__dirname, 'build')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, "public"),
    historyApiFallback: true,
    inline: true,
    hot: true,
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        use: ['babel-loader'],
        exclude: /(node_modules|bower_components)/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'React App',
      filename: 'index.html',
      template: 'public/index.html',
      favicon: 'public/favicon.ico',
      inject: true,
      minify: { //压缩HTML文件
        removeComments: true,//移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    })
  ]
}
module.exports = config

.babelrc

{
  "presets": [
    "env",
    "stage-2",
    "react"
  ],
  "plugins": ["transform-runtime"]
}

package.json

"scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack --mode production"
  },

本项目github地址: https://github.com/hefeng6500/React-App.git 

参考文章


[1​]  https://www.jianshu.com/p/000c2670672b 一文带你了解babel-preset-env

[​2]  https://blog.csdn.net/weixin_40184174/article/details/85123269 webpack学习(四):结合React框架以及ES6

[3​]  https://segmentfault.com/a/1190000011639765 以兼容的形式把babel-preset-env嵌入到babel里面

[4​]  https://blog.csdn.net/feifei159/article/details/68488693 生成目录结构

[​5]  https://blog.csdn.net/lwpoor123/article/details/81186482 One CLI for webpack must be installed. These are recommended choices, delivered as separate packages

[6​]  https://www.jianshu.com/p/0bd84b8656c5 webpack手动配置React开发环境

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值