手动配置webpack之React
安装
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的更多相关文章
- 手动配置webpack
//注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录.const path = require('path');const webpack = require( ...
- 手把手教你webpack、react和node.js环境配置（下篇）
上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...
- 手把手教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- webpack 4.x版本手动配置
运行 npm init -y 快速初始化项目 在项目根目录创建src源代码目录和dist产品目录 在src目录下创建 index.html mani.js文件如果后期使用entry打包,这里可以手动创 ...
- 优化单页面开发环境：webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- 基于webpack的react开发环境搭建新手教程
最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
随机推荐
- 如何在MySQL中分配innodb_buffer_pool_size
如何在MySQL中分配innodb_buffer_pool_size innodb_buffer_pool_size是整个MySQL服务器最重要的变量. 1. 为什么需要innodb buffer p ...
- 【tensorflow】tensorflow学习记录——安装、第一个程序篇
机器学习,人工智能往后肯定是一个趋势,现阶段有必要研究一两个人工智能的工具,以免自己技术落伍,其中tensorflow就是一个很不错的项目,有谷歌开发后开源,下面开始学习安装和使用 安装篇: 很不幸, ...
- 升级pip3的正确姿势
如果你的电脑里装了两个python,就会有两个pip,一个是pip2,一个是pip3,还有可能出现一个既没有2也没有3的pip,一般情况下,pip等于pip2 有时候我们使用pip安装东西会提示我们p ...
- js调试笔记
js调试方法很多,今天总结一下最实用的的断点方法: debugger断点 这个很常见,但许多人不知道其实可以添加条件判断 if(something){debugger;} source断点 这个最为常 ...
- 关于connect: network is unreachable 问题的解决【转】
本文转载自:https://blog.csdn.net/liukun321/article/details/6662950 由于发现原创文章,在未署名作者及出处的情况下被转载.在以后所有的原创文章开头 ...
- <关于JSP技术>运行机制及语法概述（附对本次同济校内ACM选拔赛决赛的吐槽）
(一)JSP运行的机制 JSP是一种建立在Servlet规范功能之上的动态网页技术,它们都是在通常的网页文件中嵌入脚本代码,用于产生动态内容,不过和ASP不同的是JSP文件中嵌入的是Java代码和JS ...
- 2017SN多校D1T2 note：dp
题意: 给你一个长度为n的字符串s,并且告诉你有m对字母不能相邻,问你最少在s中取出多少个字符能够使这个字符串合法. 题解: 表示状态: dp[i] = max num of letters 考虑到第 ...
- Cloudera Manager 5 和 CDH5 本地（离线）安装指南
http://archive.cloudera.com/cm5/redhat/6/x86_64/cm/5.0.0/RPMS/x86_64/ http://archive-primary.clouder ...
- 物联网项目开发必读 深度分析MQTT协议优缺点
物联网并不仅仅是一种网络,而是一个新的生态环境,它描述的本质是越来越多的使用物品通过网络连接在一起并可使用单个或者多个的终端设备对它们进行各种控制和使用—当然,工业上的物联网通常连接到的石鼓传感器或者 ...
- javascript中原型链存在的问题
我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...