Webpack 模块打包工具(module bundler)功能:

  1. 将 CSS、图片与其他资源打包
  2. 打包之前预处理(Less、CoffeeScript、JSX、ES6 等)档案
  3. 依 entry 文件不同,把 .js 分拆为多个 .js 档案
  4. 整合丰富的 Loader 可以使用

1.CDN引入<script>法写React

1.理解 React 是 Component(零件) 导向的应用程式设计

2.引入 react.js 、 react-dom.js、babel-standalone 版script

3.在 <body> 编写 React Component 要插入(mount)指定节点的地方: <div id="example"></div>

4.通过 babel 进行语言翻译 React JSX 语法, babel 会将其转为浏览器看的懂得 JavaScript

例,第一个react(CDN引入<script>法):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 以下引入 react.js, react-dom.js(react 0.14 后将 react-dom 从 react 核心分离,更符合 react 跨平台抽象化的定位)以及 babel-core browser 版-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
</head> <body> <!--React Component 要插入的地方 -->
<div id='example'></div> <!-- 以下就是包在 babel(通过进行语言翻译)中的 React JSX 语法,babel 会将其转为浏览器看的懂得 JavaScript -->
<script type='text/babel'>
ReactDOM.render(
<div>hello world!</div>,
document.getElementById('example'));
</script> </body>
</html>

2.通过 Hello World 实例来介绍如何用 Webpack 设置 React 开发环境:

1.依据你的操作系统安装 Node 和 NPM(目前版本的 Node 都会内建 NPM)

node安装:https://www.runoob.com/nodejs/nodejs-install-setup.html

2.通过 NPM 安装 :webpack、webpack loader、webpack-dev-server

【此方法现在有些过时,且麻烦,国内现用方法】https://www.cnblogs.com/chenxi188/p/11702799.html

首选:因为npm有些慢,可用国内的淘宝cnmp来代替方法参考:

A。Webpack 中的 loader :类似于 browserify 内的 transforms,但 Webpack 在使用上比较多元,除了 JavaScript loader 外也有 CSS Style 和图片的 loader

B。webpack中的webpack-dev-server可以启动开发用 server,方便我们测试

// 按指示初始化 NPM 设定档 package.json
$ npm init
// --save-dev 是可以让你将安装套件的名称和版本资讯存放到 package.json,方便日后使用
$ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server

3.在根目录设定  webpack.config.js

事实上, webpack.config.js  有点类似于  gulp  中的  gulpfile.js  功用,主要是设定  webpack  的相关设定

// 这边使用 HtmlWebpackPlugin,将 bundle 好的<script> 插入到 body。${__dirname} 为 ES6 语法对应到 __dirname

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body',
}); module.exports = {
// 档案起始点从 entry 进入,因为是阵列所以也可以是多个档案
entry: [
'./app/index.js',
],
// output 是放入产生出来的结果的相关参数
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
}, module: {
// loaders 則是放想要使用的 loaders,在这边是使用 babel-loader 将所有 .js(这边用到正则)相关文件(排除了 npm 安裝的套件位置 node_modules)编译成浏览器可以阅读的 JavaScript。
//preset 则是使用的 babel 编译规则,这边使用 react、es2015。若是已经单独使用 .babelrc 作为 presets 設定的话,则可以省略 query
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
],
},
// devServer 则是 webpack-dev-server 设定
devServer: {
inline: true,
port: 8008,
},
// plugins 放置所使用的外挂
plugins: [HTMLWebpackPluginConfig],
};

4.在根目录设定  .babelrc

{
"presets": [
"es2015",
"react",
],
"plugins": []
}

5.安装 react 和 react-dom

$ npm install --save react react-dom

6.编写 Component(记得把 index.html 以及 index.js 放到 app 文件夹底下喔!)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Setup</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- 想要插入 React Component 的位置 -->
<div id="app"></div>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));

7.在终端机使用 webpack 进行成果展示.

webpack 相关指令:

  • webpack:会在开发模式下开始一次性的建置
  • webpack -p:会建置 production 的程式码
  • webpack --watch:会监听程式码的修改,当储存时有异动时会更新档案
  • webpack -d:加入 source maps 档案
  • webpack --progress --colors:加上处理进度与颜色

如果不想每次都打一长串的指令码的话可以使用 package.json 中的scripts 设定:

"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --co
lors --content-base build"
}

8.当我们此时我们可以打开浏览器输入 http://localhost:8008 ,就可以看到Hello, world! 了!

二、react开发环境配置与webpack入门的更多相关文章

  1. 【webpack结合React开发环境配置】React开发环境配置之Webpack结合Babel8.x版本安装的正确姿势(Webpack最新版4.x结合Babel8.x环境配置步骤)

    1. 安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org[使用淘宝镜像]2. 初始化package.json文件c ...

  2. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  3. C#进行CAD二次开发环境配置

    最近被公司分配到了做CAD二次开发.也是初次接触这方面的东西,其实是有些无从下手的感觉.因为公司这边也没有人有时间带我,只能是自己看书,然后再写一些Demo,再结合实际的应用来一点点的学习.废话不多说 ...

  4. React开发环境配置

    本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...

  5. Revit二次开发环境配置(Revit 2020 +Visual Studio 2019)

    Revit二次开发环境搭建(Revit 2019+Visual Studio 2017)准备内容 Revit 2019开发环境的搭建,需要安装的内容如下: Revit 2019(主要的开发环境) Vi ...

  6. xshell远程终端操作Ubuntu server安装LAMP环境之最详细笔记之二PHP开发环境配置

    前言: 昨天学会了安装server,今天试着通过远程终端xshell来安装LAMP,搭配一下开发环境,也有集成环境可以一键安装使用,还是瞎折腾一下,手动一步一步搭建一下这个开发环境. 接上一篇:ubu ...

  7. JMeter二次开发环境配置

    本文主要介绍如何在Eclipse中配置JMeter开发环境. 一.下载JMeter源码 1.在JMeter官网下载二进制包和源码包: 解压备用: 二进制解压后文件夹名称为“jmeter_release ...

  8. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  9. 搭建 webpack、react 开发环境(二)

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

随机推荐

  1. Windows数据类型探幽——千回百转你是谁?----转载

    Windows数据类型探幽——千回百转你是谁?原创 danis 发布于2007-01-29 20:40:00 阅读数 749 收藏展开 Windows Data TypesWindows数据类型 由微 ...

  2. P1001 A+B Format

    转跳点:

  3. 网络流的最大流入门(从普通算法到dinic优化)

    网络流(network-flows)是一种类比水流的解决问题方法,与线性规划密切相关.网络流的理论和应用在不断发展.而我们今天要讲的就是网络流里的一种常见问题--最大流问题. 最大流问题(maximu ...

  4. 针对小文件的spark wholeTextFiles()

    场景:推送过来的数据文件数量很多,并且每个只有10-30M的大小 spark读取hdfs一般都是用textfile(),但是对于这种情况,如果使用textFile默认产生的分区数将与文件数目一致,产生 ...

  5. 【Unity】关于屏幕自适应的思路

    关于NGUI的屏幕自适应,大体思路可以这样做: 比如要实现在屏幕的左侧做一个长条背景: 可以看出这部分图片是和屏幕高度一致的.那么只要得到“制作时的屏幕高度”以及“当前运行屏幕高度”,求两个值的比值, ...

  6. numpy高级函数:where与extract

    numpy高级函数:where与extract 1.numpy.where()函数,此函数返回数组中满足某个条件的元素的索引: import numpy as np x = np.array([[1, ...

  7. jmeter断言之响应code:200

    因为Jmeter只要检测到网页的响应,就认为是Pass而并不管当前网页内容的正确性.在进行压力测试时,为了检查Web服务器返回的网页是否正确,我们可以设置断言,这些断言是验证网页上是否存在指定的Tex ...

  8. Django-路由Routers-SimpleRouter-DefaultRouter使用方法

    路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...

  9. 回收 PV【转】

    当 PV 不再需要时,可通过删除 PVC 回收. 当 PVC mypvc1 被删除后,我们发现 Kubernetes 启动了一个新 Pod recycler-for-mypv1,这个 Pod 的作用就 ...

  10. nuxt.js 初始化 npm run dev 报错

    在初始化 npm install 了基本依赖后: npm run dev 报错: error in ./server/index.js Module build failed: Error: Plug ...