安装

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. 开发笔记--java.lang.OutOfMemoryError: PermGen space异常处理

    第一次到公司开发项目,比起之前的小项目来说这次的项目特别大,以至于运行之后出现了java.lang.OutOfMemoryError: PermGen space的异常,从字面意思上来看是内存溢出的原 ...

  2. Java拓展教程:文件DES加解密

    Java拓展教程:文件加解密 Java中的加密解密技术 加密技术根据一般可以分为对称加密技术和非对称加密技术.对称加密技术属于传统的加密技术,它的加密和解密的密钥是相同的,它的优点是:运算速度快,加密 ...

  3. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  4. 畅游HttpCore

    欢迎 非常欢迎阅读本文,本文主要介绍HttpCore是如何工作的. 你应该知道HTTP是一种用于在客户端与服务端进行消息交换的协议.它使用的特别广泛,它通常运行在TCP/IP或者安全的TLS/SSL之 ...

  5. [BZOJ 1095] [ZJOI 2007]Hide 捉迷藏

    在BZ上连续MLE n次后,终于A了. 自己YY的动态点分写法,思路还是很清楚的,但是比较卡内存. 用到了MAP导致复杂度比其他的代码多了一个log,看来需要去借鉴一下别人怎么写的. updata i ...

  6. 简单通俗解释内外网IP与端口映射

    IP:分为外网IP和内网IP 也就是我们说的外网IP属于实体IP 实体IP,它是独一无二的,在网络的世界里,每一部计算机的都有他的位置,一个 IP 就好似一个门牌!例如,你要去百度的网站的话,就要去『 ...

  7. mysql七:视图、触发器、事务、存储过程、函数

    阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...

  8. spring框架IOC原理分析代码

    模拟ClasspathXmlApplication: package junit.test; import java.beans.Introspector; import java.beans.Pro ...

  9. selenium总结

    个人对selenium的理解: 1.使用selenium操作浏览器,实际上是使用selenium框架下的webdriver启动各浏览器的驱动实现对浏览器的操作的.以下两句代码即可启动firefox浏览 ...

  10. next enum in swift

    enum Iter: Int{ case s1=0, s2, s3, s4 mutating func next(){ if self == .s4 { self = .s1 return } sel ...