前言
这是一篇关于react+webpack基础的入门指南
react是目前火的不行的前端web技术框架,webpack也是在项目开发中用的较多的构建，打包，编译工具了；当然还有gulp，grunt等等。如果想学习react
如果不想使用webpack，推荐大家使用facebook官方构建工具create-react-app来创建React基础工程。
推荐下面文章：
很不错的文章,以下是我个人学习的过程和踩坑记录
开发环境
- node / npm
- webstorm / atom(github官方强烈推荐的编译工具---万能神器)
node
建议镜像切换到taobao提供的；这里不再赘述。
webstorm / atom
webstorm是JetBrain产品，该公司的产品很不错包括Idea等。
重点说一下atom，这是github推出的，内置git，还有很多插件提供，无论你想使用它开发web，android，iOS，node，python等都可以找到满意的插件提高开发的效率，这简直是一款吊到爆的开发工具。本教程src是采用atom构建并完成
atom的下载地址:atom
目录结构
A2FE9CA5-5EAE-4086-9C86-B2D12EB2724F.png
创建project
首先创建一个文件夹名字test01
cd 到 test01
terminal执行 npm init 输入命令后，终端会问一系列的问题，如果不需要在npm中发布你的模块，一路回车默认即可（注意：name需要小写）；
然后你会发现根目录多了一个package.json 这是项目核心文件，包括包管理依赖关系，需要执行的脚本任务；例如 java中maven的pom.xml， iOS中cocoapod的podfile， android中gradle的build.gradle
为创建webpack配置做准备
- 创建
build目录- 创建
index.html文件 - 创建
build.js文件 不需要编写任何内容(编译后的浏览器识别的js)
- 创建
- 创建
src目录- 创建
app.js
- 创建
创建index.html
index.html源文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>react-webpack</title>
</head>
<body>
<div id='app'>
/* react DOM*/
</div>
<script src="bundle.js"></script>
</body>
</html>
安装 react, react-dom
npm install react,react-dom --save
在老版本中，不知道什么那个版本以前，react与react-dom是一个库，后来分开了，所以需要安装2个库，这是我曾经踩的坑
app.js源代码：
(采用es6)，不懂es6的可以先去学习一下
import React from 'react'
import ReactDom from 'react-dom'
//用ReactDom 渲染 到 index.html <div id='app'></div>
//
ReactDom.render(<h1>hello react</h1>,document.getElementById("app"))
安装webpack
采用局部安装webpack
npm install webpack --save
当然可以全局--安装(在任何目录下都可以使用webpack命令，当然前提是webpack构建的项目了，不然的话会报错)
npm install -g webpack
然后创建webpack.config.js
var path = require('path')
module.exports = {
//__dirname 是全局一个变量 当前根目录
entry: path.resolve(__dirname, './src/app.js'), // 需要编译的入口文件
// 输入编译后的文件到build目录的bundle.js
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};
entry:指定了webpack的入口程序,从这里编译，构建应用程序
output:输入编译后的文件到build目录的bundle.js
这是可以执行webpack 命令编译构建项目，会报错，这是必然的
报错内容:
ERROR in ./src/app.js
Module parse failed: /Users/liushuo/Desktop/test/src/app.js Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import ReactDom from 'react-dom'
|
| ReactDom.render(<h1/>,document.getElementById("app"))
重点
假如app.js文件没有任何内容就不会报错，可以尝试一下哦
会报错是因为我们使用了react，react是使用jsx语法的实现，jsx是不能被浏览器识别的和执行的。解决方案-引入需要的库Babel
安装并配置
npm insatll babel-core babel-loader babel-preset-es2015 babel-preset-react --save
其实Babel是语法转化器
Babel在旧版本中是一个模块，新版本中功能分开了，babel-core是核心的功能
babel-loader:babel加载器
babel-preset-es2015:es6转化成es5 为了兼容个别浏览器可以正常使用
babel-preset-react:jsx->js
Babel其实可以完全在webpack.config.js中进行配置
但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
webpack.config.js配置loades
var path = require('path')
module.exports = {
//__dirname 是全局一个变量 当前根目录
entry: path.resolve(__dirname, './src/app.js'), // 需要编译的入口文件
// 输入编译后的文件到build目录的bundle.js
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: 'babel-loader'//loader的名称（必须是全称，简单的一个babel会报错）
}
]
}
};
再次执行webpack，就不会报错了，ok你已经成功了一步。
还记得上面提到的package.json可以定义执行脚本吗?
在scripts加入内容
"scripts": {
"build": "webpack",
},
执行 npm run build 和 执行webpack是一样的，这就是我们自己定义的npm执行的脚本任务
然后使用浏览器打开index.html， 就会看到hello react;
然后修改app.js h1标签的内容 刷新浏览器 ，你会发现没有任何变化，因为这是你修改的内容没有重新编译，
在termianal重新执行npm run build,刷新浏览器，这时候修改的内容出现了。
每次修改都要去手动构建编译，不觉得很麻烦吗？
这样的话，和以前刀耕火种的web前段时代有什么区别呢？
所以我们需要引入webpack-dev-server
配置 webpack-dev-server
安装webpack-dev-server
npm install webpack-dev-server --save
简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。那么，它能给开发带来什么便利呢？
第一 支持自动刷新
第二 支持Hot Module Replacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。使用HMR功能也有两种方式：命令行方式和Node.js API。
这样我们通过配置 webpack devServer 实现代码自动编译和浏览器自动刷新
注意:
var path = require("path")
var webpack = require('webpack')
module.exports = {
//入口
entry:['webpack/hot/dev-server',path.resolve(__dirname,'./src/app.js')],
//编译到的目标
output: {
path: path.resolve(__dirname,'./build'),
filename: 'bundle.js',
},
//webpack-dev-server配置
devServer: {
contentBase: './build',//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
inline: true,//设置为true，当源文件改变时会自动刷新页面
port: 8082,//设置默认监听端口，如果省略，默认为"8080"
},
devtool: 'eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin()//热模块替换插件
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: 'babel-loader'//loader的名称（必须）
}]
}
}
然后在package.json scripts加入 "dev":"webpack-dev-server"
scripts:{
"dev":"webpack-dev-server",
"run":"webpack"
}
执行npm run dev 没有报报错就说明启动成功了
这是打开http://localhost:8082 就可以看到与之前的页面一样了，然后修改app.js ,h1内容， terminal会自动编译，然后浏览器会自动刷新页面。大功告成！
本编文章只是初步介绍react-webpack的入门，后面我还会抽空更新react/react-nativ的相关教程，谢谢！
网友评论