安装

1.安装react转译相关依赖包：

npm安装：
            npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

(推荐) yarn安装：
            yarn add --dev babel-core babel-loader babel-preset-es2015 babel-preset-react

2.webpack相关依赖：
        yarn add --dev webpack webpack-cli webpack-dev-server

3.webpack插件：
        yarn add --dev html-webpack-plugin clean-webpack-plugin

4.react相关：
        yarn add react react-dom

配置

项目结构：

|__src

   |____dist

        index.html

        main.bungle.js (动态生成)

   |____

        index.js

        app.jsx

   index.html

   webpack.config.js

   package.json

文件配置：

package.json

{

  "name": "0501",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack",

    "start": "webpack-dev-server --open"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.26.3",

    "babel-loader": "^7.1.5",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "clean-webpack-plugin": "^0.1.19",

    "express": "^4.16.3",

    "html-webpack-plugin": "^3.2.0",

    "webpack": "^4.16.2",

    "webpack-cli": "^3.1.0",

    "webpack-dev-middleware": "^3.1.3",

    "webpack-dev-server": "^3.1.5"

  },

  "dependencies": {

    "react": "^16.4.1",

    "react-dom": "^16.4.1"

  }

}

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Development</title>

  </head>

  <body>

    <div id="root"></div>

  </body>

</html>

webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')   //生成dist/index.html文件的插件，具体见webpack插件

const CleanWebpackPlugin = require('clean-webpack-plugin')  //删除dist文件夹 webpack插件

module.exports = {

    entry: path.resolve(__dirname, './src/index.js'),

    output: {

        path: path.resolve(__dirname, './dist'),

        filename: '[name].bundle.js',

        publicPath: '/'

    },

    devtool: 'inline-source-map',

    mode: 'production',

    module: {

        rules: [

            {

                test: /\.js$/,

                exclude: /node-modules/,

                loader: 'babel-loader',

                options: {

                    presets: ['es2015', 'react']

                }

            },

            {

                test: /\.js$/,

                exclude: /node-modules/,

                loader: 'babel-loader',

                options: {

                    presets: ['es2015', 'react']

                }

            }

        ]

    },

    plugins: [

        new CleanWebpackPlugin(['dist']),

        new HtmlWebpackPlugin({

          template: './index.html',  //在生成html时，是基于这个模板生成的

          title: 'Development',

          hash: true

        })

    ]

}

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './app.jsx'

ReactDOM.render(

    <App></App>,

    document.getElementById('root')

);

app.jsx

import React from 'react'

export default class App extends React.Component {

    constructor () {

        super()

        this.state = {

            txt: '11111111'

        }

    }

    render () {

        const txt = this.state.txt

        return (

            <div>

                {txt}

            </div>

        )

    }

}

描述：

npm run build：生成dist目录和index.html、打包后的js文件
npm run start：开发时用

手动配置webpack之React的更多相关文章

  1. 手动配置webpack

    //注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录.const path = require('path');const webpack = require( ...

  2. 手把手教你webpack、react和node.js环境配置（下篇）

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

  3. 手把手教你webpack、react和node.js环境配置（上篇）

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  4. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  5. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  6. webpack 4.x版本手动配置

    运行 npm init -y 快速初始化项目 在项目根目录创建src源代码目录和dist产品目录 在src目录下创建 index.html mani.js文件如果后期使用entry打包,这里可以手动创 ...

  7. 优化单页面开发环境：webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  8. 基于webpack的react开发环境搭建新手教程

    最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...

  9. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

随机推荐

  1. 韩国版微信Kakao推出公链，能否用区块链实现全球扩张？

    2018年是属于区块链的一年,国内外巨头们纷纷布局区块链产业,前不久韩国最大的移动社交平台Kakao集团正式启动了旗下的第一个公链Klaytn的测试网. 此次宣布只是一次试探性举措,旨在对外公布Kla ...

  2. Windows 安装nginx

    http://nginx.org/en/docs/windows.html 在nginx.exe目录,打开命令行工具,用命令 启动/关闭/重启nginx    start nginx : 启动ngin ...

  3. LeetCode：删除链表中的节点【203】

    LeetCode:删除链表中的节点[203] 题目描述 删除链表中等于给定值 val 的所有节点. 示例: 输入: 1->2->6->3->4->5->6, val ...

  4. 《程序员代码面试指南》第七章 位运算 在其他数都出现k 次的数组中找到只出现一次的数

    题目 在其他数都出现k 次的数组中找到只出现一次的数 java 代码 package com.lizhouwei.chapter7; /** * @Description: 在其他数都出现k 次的数组 ...

  5. Spring Boot2.0之多数据源事务管理

    结合前面做的小项目,如果我把test01 test02下面的 service 都加了 事务的注解 这样启动时候会报错! 事务管理器里面不能有两个事务!!!! 这时候需要用  @Transactiona ...

  6. Java集合的有序无序问题和线程安全与否问题

    首先,清楚有序和无序是什么意思: 集合的有序.无序是指插入元素时,保持插入的顺序性,也就是先插入的元素优先放入集合的前面部分. 而排序是指插入元素后,集合中的元素是否自动排序.(例如升序排序) 1.有 ...

  7. java中interface 的特性

    有时必须从几个类中派生出一个子类,继承它们所有的属性和方法.但是,Java不支持多重继承.有了接口,就可以得到多重继承的效果. 接口(interface)是抽象方法和常量值的定义的集合.从本质上讲,接 ...

  8. PS滤镜— —波浪效果

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  9. 在Asterisk CLI里面采用originate发起一个呼叫

    Asterisk cli下面可以执行很多命令,originate的用途是发起一个呼叫然后连接到指定的应用或上下文. 跟.call呼叫文件和AMI管理接口里的外呼功能一样,有两种语法格式: 呼叫成功转应 ...

  10. BZOJ3295：[CQOI2011]动态逆序对

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...