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

最新推荐文章于 2024-08-30 08:27:57 发布

兰亭古墨

最新推荐文章于 2024-08-30 08:27:57 发布

阅读量889

点赞数

分类专栏： Reactjs 文章标签： React 脚手架 webpack 手写

本文链接：https://blog.csdn.net/hefeng6500/article/details/87479711

版权

Reactjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

三、构建文件目录

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开发环境