webpack4从零配置搭建简单的React16开发环境

写在最前

暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢!

之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.

说明

  1. 开发环境是windows 10
  2. 技术栈版本
    • node 10.3.0
    • npm 6.1.0
    • webpack 4.16.1
    • react 16.4.1
    • babel-core 6.26.3
    • babel-loader 7.1.5
    • babel-preset-env 1.7.0
    • babel-preset-react 6.24.1

初始化项目

  • 创建文件夹并进入
mkdir react-start&& cd react-start
  • 初始化package.json文件        
npm init -y

    -y的意思是按照默认的填写

webpack

  • 安装webpack
npm i webpack webpack-cli -D

  -D的意思是保存到开发依赖中

  在webpack4中, 需要同时安装webpack和webpack-cli, 因为两者在webpack4中分开管理了

  • 新建webpack开发配置文件
touch webpack.config.js

  webpack.config.js

const path = require(‘path‘);

module.exports = {
    // 入口文件
    entry: {
        app: ‘./src/index.js‘
    },
    // 输出到dist文件夹, 文件名字为bundle.js
    output: {
        filename: ‘bundle.js‘,
        path: path.resolve(__dirname,‘./dist‘)
    }
}
  • 新建src目录然后在里面新建index.js文件
mkdir src && cd src && touch index.js

  在index.js里面输入

console.log(‘Hello World!‘);
  • 进入package.json文件, 在scripts里面加入"build"
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }
  • 回到根目录, 在命令行里输入npm run build
npm run build
  • 可以看到以下内容, 表示编译成功

  

  可以看到, 一个webpack命令执行了什么呢?

  官网是这样解释的, 如果webpack.config.js存在, 则webpack命令将默认选择使用它.

  我们也可以使用  webpack --config webpack.config.js 命令来指定配置文件

  • 现在我们来测试一下,在dist文件夹里面新建index.html

  index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script src="./bundle.js"></script>
</body>
</html>
  • 用浏览器打开index.html可以看到控制台输出了Hello World!

 

  • 到现在为止, 我们已经完成了基本的webpack配置了.

  React

  • 下面我们正式开始搭建React
  • 安装react和react-dom
npm install react react-dom --save

  也可以简写为:

npm i react react-dom -S
  • 因为react中使用JSX语法, 所以我们需要 babel来编译它
npm i babel-core babel-loader babel-preset-env babel-preset-react -D

  其中babel-core是核心文件, babel6推荐使用 babel-preset-env 来对ES2015及更高版本进行转换, babel-preset-react能够转换JSX语法

  • 在根目录下新建babel配置文件.babelrc
touch .babelrc
  • 修改webpack.config.js, 增加babel-loader
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ‘babel-loader‘,
                exclude: /node_modules/
            }
        ]
    }
  • 修改src文件夹里面index.js
import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;

ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById(‘root‘)
)
  • 修改dist文件夹里面的index.html, 加上<div id="root"></div>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>
  • 执行命令npm run build, 可以看到编译成功
  • 用浏览器打开index.html, 可以看到

  

  现在, 已经成功地用webpack编译JSX语法了

  但是我们在开发中, 每次要编译代码时, 手动运行npm run build 会变得很麻烦, 所以我们可以使用插件来帮助我们在代码发生变化后自动编译代码

  使用webpack插件进行开发

  • 安装webpack-dev-server
npm i webpack-dev-server -D
  • 修改webpack.config.js, 增加devServer
    devServer: {
        port: 3000,
        contentBase: ‘./dist‘
    }

   意思是把服务器端口设为3000, 默认目录是dist

  • 修改package.json, 增加一个script脚本, 可以直接运行开发服务器
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },
  • 运行npm run server
npm run server

  直接修改index.js里面的内容, web 服务器就会自动重新加载编译后的代码

  

  至此, 简单的react开发环境已经搭建完成了!

  代码请看我的github: https://github.com/Ga-hou/react-start

原文地址:https://www.cnblogs.com/gahou/p/9351002.html

时间: 2024-10-07 05:31:27

webpack4从零配置搭建简单的React16开发环境的相关文章

[java,maven] 使用 maven 来搭建简单的 netty 开发环境

大致过程是: 首先, 使用 mvn 命令在指定路径下面创建一套简单的  java 文件包. 然后, 使用 JIdea 导入 maven 项目的方式将创建好的文件包加载到 IDE 环境中.‘ 接下来, 在 IDE 环境中修改 pom.xml 文件,在关联标签下面,根据不同需要来,写入 netty 最新版本的值. 随后在 .java 文件中通过调用 import 语句来检测 netty 的系列函数包是否被成功加载到当前项目的开发环境中. 具体过程描述如下 : 1. 首先确保系统中已经正确的安装好 m

[python][django学习篇][搭建简单的django开发环境]---暂时不搭建mysql

http://zmrenwu.com/post/3/ 1 搭建Python的虚拟环境: 安装virtualenv (前提是已经安装好Python和Pip)      pip install virtualenv 电脑新建目录:D:\software\python_virtual_envs\djanoproject_env 执行命令virtualenv D:\software\python_virtual_envs\djanoproject_env 执行虚拟环境:运行D:\software\pyt

在windows server 2008下搭建简单的java学习环境

1.JDK安装 直接运行下载的JDK安装文件jdk-8u5-windows-i586.exe,按照提示指引进行安装.其中中途有选择JRE的安装,也一并安装了. 2.JDK与JRE的关系 JDK是Java的开发平台,在编写Java程序时,需要JDK进行编译处理: JRE是Java程序的运行环境,包含了JVM的实现及Java核心类库,编译后的Java程序必须使用JRE执行. 在下载的JDK安装包中集成了JDK与JRE,所以在安装JDK过程中会提示安装JRE. 3.环境配置 计算机->属性->高级系

搭建 webpack、react 开发环境(一)

基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.less 等转换成一个静态文件,减少了页面的请求. React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,它是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).由于拥有较高的性能,代码逻辑非常简单,所以

windows下搭建Apache+Mysql+PHP开发环境

原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5.5php-5.3 下载地址 环境下载 官方下载地址 Apache MySql PHP 至于我使用的版本已经上传到百度云提供大家下载了,这里就不多啰嗦了!! Apache Apache的安装和普通的应用程序安装没什么太大的区别,关键是配置.打开安装路径下的"conf\httpd.conf"文

Ubuntu下搭建Cocos2D-X 3.6开发环境

简单讲解在Ubuntu下搭建Cocos2D-X 3.6开发环境的过程,希望对大家有用. 1.解压下载的包,找到build目录: 在终端下先执行install-deps-linux.sh文件 结果类似: 时间可能比较长. 2.回到解压包的根目录下执行setup.py: 可以看出这个执行完成的是检测系统环境并在配置文件中加入需要的环境变量,会将原配置文件备份. 3.在解压包的目录运行 cmake . 注意后面代表当前目录的 . (不要在意sudo) 4.make 用cmake生成的Makefile就

Mac下用brew搭建LNMP和LAMP开发环境

Mac下搭建lamp开发环境很容易,有xampp和mamp现成的集成环境.但是集成环境对于经常需要自定义一些配置的开发者来说会非常麻烦,而且Mac本身自带apache和php,在brew的帮助下非常容易手动搭建,可控性很高 Brew brew对于mac,就像apt-get对于ubuntu,安装软件的好帮手,不能方便更多- brew的安装方式如下: ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"

ubuntu上用eclipse搭建java、python开发环境

上一篇文章讲到如何在windwos上用eclipse搭建java.python开发环境,这一讲将关注如何在ubuntu上实现搭建,本人使用虚拟机安装的ubuntu系统,系统版本为:14.04 lts 一.用eclipse + jdk搭建java开发环境 1.jdk官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 本人下载的是:jdk-8u77-linux-x64.tar.gz

在Eclipse上搭建Cocos2d-x的Android开发环境

很多其它相关内容请查看本人博客:http://www.bokeyi.com/ll/category/cocos2d-x/ 本文的搭建方法是最新最正确的方法,好多朋友反映搭建eclipse交叉编译环境非常复杂又头疼,事实上仅仅是网上的资料太过零散,差一步而谬之千里啊,不多说,假设你看了这篇文章,恭喜你,你省下了至少48小时的生命. 我的操作系统:WIN7 Eclipse版本号:eclipse-jee-kepler-SR2-win32 Cocos2d-x版本号:2.2.3 一.Android环境搭建