webpack2 react 简单介绍（一）
2016-12-22 本文已影响2813人
阿波罗程序猿
什么是React？
React是一个JavaScript库用于构建用户界面。React能轻松的创建出交互式组件。在你的应用里为每个状态设计简单的视图，当数据有变化时React可以高效的更新和渲染组件。
React都干了什么？
- UI
React负责UI层面的展现。一般的情况下，我们在开发过程中，直接使用HTML来构建UI，React换了一种思路解决问题，它把UI拆分成组件，使得它可以易于拓展和维护。因此它引入了JSX这种语法规则，可以让我们使用类似HTML的语法去写JS的函数调用。
- 虚拟DOM
浏览器渲染页面的一般过程通常是这样的：
加载html->生成DOM树->解析css生成Render树->生成页面
React的虚拟DOM是这样的：
生成虚拟DOM->diff算法->必要的DOM更新 - 数据流
在React中，数据的流向是单向的——从父节点传递到子节点，如果顶层组件的某个prop改变了，React会递归的向下遍历整棵组件树，重新渲染所有使用这个属性的组件。
React组件内部还具有自己的状态，这些状态只能在组件内修改。React的组件你可以把它们称为是一个函数，它接受props和state作为参数，返回一个虚拟DOM的表现。
什么是webpack？
Webpack是一种包模块管理工具。Webpack将项目中的一切资源都看做是模块，模块之间可以互相依赖，Webpack对它们做统一的管理，打包和发布，用于我们的项目构建工作流中。
- webpack主要特点
1.同时支持CommonJS和AMD模块。
2.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对ES6的支持。
3.可以基于配置打包成多个文件，实现公共模块或者按需加载。
4.支持对CSS，图片等资源进行打包。
5.开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求。
6.对sourcemap有很好的支持，易于调试。
webpack.config.js 文件
webpack.config.js文件，所有跟webpack有关的工作，都在这个文件中进行配置。
- 先来看看这个文件长什么样
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
let DEV = process.env.NODE_ENV === 'DEV'; //开发模式
let PROD = process.env.NODE_ENV === 'PROD'; //生成模式
let entry = PROD
? [
'./src/index.js'
]
: [
'./src/index.js',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
];
var plugins = PROD
? [
new webpack.optimize.UglifyJsPlugin({
comments: true,
mangle: false,
compress: {
warnings: true
}
}),
new ExtractTextPlugin('style.css')
]
: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(DEV),
PRODUCTION: JSON.stringify(PROD)
})
];
var cssIdentName = PROD ? '[hash:base64:10]' : '[path][name]-[local]-[hash:base64:24]';
var cssLoader = PROD
? ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: 'css-loader?localIdentName=' + cssIdentName
})
: ['style-loader', 'css-loader?localIdentName=' + cssIdentName];
//webpack配置文件项
module.exports = {
devtool: "source-map",
//入口文件
entry: entry,
//输出打包的文件
output: {
//打包文件名
filename: 'bundle.js',
//bundle.js输出路径,是一个绝对路径
path: path.join(__dirname, 'dist'),
//在html页面中需要的导入资源的路径
publicPath: '/dist/'
},
plugins: plugins,
module: {
loaders:[
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel-loader'
},
{
test: /\.(jpg|gif|png)$/,
exclude: '/node_modules/',
// loader: 'file-loader'
loader: 'url-loader?limit=512&name=[path][name].[ext]?[hash]'
},
{
test: /\.css$/,
exclude: '/node_modules/',
loader: cssLoader
}
]
},
resolve:{
modules: [
"node_modules",
path.join(__dirname, "src")
],
extensions: [".js", ".json", ".jsx", ".css", ".gif"],
},
devServer: {
hot: true,
publicPath: '/dist/',
stats: {
colors: true
}
},
performance: {
hints: false
}
};
webpack.config.js也是一个标准的Commonjs模块，其中包含module.exports这样的标志性关键词。
- 它的主要的配置参数有：
devtool：debug时输出原文件可以方便debug
entry : 它是程序的入口文件
output: webpack的输出打包文件配置
plugins：webpack的插件，包括第三方的和自带的
module：单元模块配置，在里面定义loaders，告诉webpack如果业务里加载了css或者图片该怎样去处理
resolve：extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件，添加了这个配置我们只要写：require('common')就可以了
devServer：用于开发服务器配置
performance：配置webpack的通知提示
构建项目环境顺序
- 确保安装nodejs
- 建议安装IDE webstrom
新建空项目
新建空项目
在项目根目录新建package.json文件
- 在IDE控制台中输入
npm init
npm init
在项目根目录中新建webpack.config.js
然后参展官网配置webpack.config.js 上面已经有例子
接下来安装依赖包
这个依赖包可以按需加载，不用非得全安装下来
npm i babel-core@6.21.0 babel-loader@6.2.10 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 bootstrap@3.3.7 css-loader@0.26.1 extract-text-webpack-plugin@2.0.0-beta.4 file-loader@0.9.0 jquery@3.1.1 lodash@4.17.2 react@15.4.1 react-bootstrap@0.30.7 react-dom@15.4.1 react-hot-loader@1.3.1 style-loader@0.13.1 url-loader@0.5.7 webpack@2.1.0-beta.28 webpack-dev-server@2.1.0-beta.12 --save --only=dev
新建一些文件和文件夹（除.babelrc，可自定义）
mkdir dist （用于存放输出好的文件）
mkdir src （存放项目文件）
touch .babelrc （babel的配置文件，用于把es6的语法转译成当前浏览器识别的es5的语法，把react的jsx语法转译成js语法）
touch index.html（普通的入口文件）
.babelrc文件
{
"presets": [
["es2015", {"modules": false}],
"react"
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-react-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<link rel="stylesheet" href="dist/style.css">-->
</head>
<body>
<div id="app">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/dist/bundle.js"></script>
</div>
</body>
</html>
package.json
{
"name": "webpack-react-test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=PROD webpack --progress --watch",
"dev": "NODE_ENV=DEV webpack-dev-server"
},
"author": "zhangbo",
"license": "ISC",
"dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"jquery": "^3.1.1",
"lodash": "^4.17.2",
"react": "^15.4.1",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.28",
"webpack-dev-server": "^2.1.0-beta.12"
}
}
新建index.js
import React from 'react';
import {render} from 'react-dom';
class HelloReact extends React.Component {
render() {
return(
<div>Hello React!!!</div>
);
}
}
render(<HelloReact />, document.getElementById("app"));
if (module.hot) {
module.hot.accept();
}
启动服务器
根据package.json中对scripts的定义
在终端输入 npm run dev 来启动服务器
启动webpack-dev-server
在浏览器中输入访问地址
原文件，debug
项目结构
