安装

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. MySQL基于二进制日志的主从复制

    一.什么是MySQL的主从复制? MySQL可以将一个数据库设置为主库,另一个数据库设置为该主库的从库,当主库发生了变更,会同步到从库中.MySQL的主从架构,可以是星型的,也可以是线型的. 星型架构 ...

  2. sql语法值ORACLE简单介绍

    版权声明:本文为[博主](https://zhangkn.github.io)原创文章,未经博主同意不得转载.https://creativecommons.org/licenses/by-nc-sa ...

  3. 《转》使用nginx和php实时产生缩略图

    在做自动静态化的时候,突然想到下面这个场景,也给出了解决方法.亲,真的很实用,耐心看下去.     当我从后台上传一个截图之后,480*800的截图之后,当时就没有压缩出320*480的小缩略图.好吧 ...

  4. testng ITestListener使用

    ITestListener适用场景 当使用testng执行测试时,我们常会想在某个阶段做一些特别的处理,比如:测试成功结束后,测试失败后,跳过某个脚本后,全部脚本执行完毕后.要想达成这个目标,我们需要 ...

  5. ubuntu删除文件夹

    -r表示强制删除,-f表示不提示 强制删除文件夹并提示 sudo rm -r 文件夹名 强制删除文件夹不提示 (最暴力) sudo rm -rf 文件夹名

  6. myeclipse 安装flex插件后变为中文 修改配置文件切换到英文界面

    解决办法: 1. cmd 敲命令进入安装目录,运行myeclipse.exe -nl en后,启动为英文 在安装目录下新建txt,改名为myeclipse.bat,将上面那行命令写入保存,再发送快捷方 ...

  7. 2048聚合版开源代码,cocos2d-js编写,基于CocosEditor开发工具,可运行Android,ios,html5等

    1. [代码][JavaScript]代码         /** * @GameName : * 2048 * * @DevelopTool: * Cocos2d-x Editor (CocosEd ...

  8. NOIP 2014【斗地主】

    这真是道大火题. 因为保证数据随机,所以开始很多人直接用搜索 + 贪心水过去了,后来,为了遏制骗分这种不良风气的传播,各大 OJ 相继推出了斗地主加强版-- 正解: 先爆搜顺子,枚举打或不打,打多少张 ...

  9. Posix线程编程指南(1)

    这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第一篇将向您讲述线程的创建与取消.   一.线程创建 1.1 线程与进程相对进程而言,线程是一 ...

  10. Gym:101630J - Journey from Petersburg to Moscow(最短路)

    题意:求1到N的最短路,最短路的定义为路径上最大的K条边. 思路:对于每种边权,假设为X,它是第K大,那么小于X的变为0,大于K的,边权-X.然后求最短路,用dis[N]+K*X更新答案. 而小于K的 ...