我是一个react的初学者，在学习的过程中遇到了模板搭建问题，想把自己遇到的问题记录下来，顺便加深印象，有不对的地方请指正。
学习的过程中，我主要感谢两个人的博客：
- http://www.wukai.me/2016/09/14/create-a-react-webpack-es6-project/
- http://www.jianshu.com/p/42e11515c10f
这两个人的博客写的都非常好，感兴趣的同学可以去看看。
由于我之前没有接触过webpack,所以先学习了一下博客2，然后在按照博客1进行的实现。
什么是webpack?
通俗说是一个模块打包机。它分析项目结构，找到JavaScript模块以及一些不能直接运行的拓展语言，然后将其打包合适的格式以供浏览器使用。它的工作方式是：把项目当做一个整体，通过一个给定的文件，从改文件开始找到项目的所有依赖文件，使用loaders处理他们，最后打包为一个浏览器可识别的js文件。
项目结构
-src
-index.js
-App.js
-.babelrc
-index.html
-package.json
-server.js
-webpack.config.js
项目步骤
环境搭建
需要安装node.js，因为后续要用到npm
初始化项目
首先创建一个空的文件夹，名字自己拟定。在该文件中，同时按shift和鼠标右键进入当前的命令行,输入：
npm init //按照提示输入项目的基本信息 //或者是输入 npm init -y //按照默认方式设置基本信息
//作用是：初始化一个项目，此时多出来一个package.json文件
package.json 文件的作用是：
- 相当于你本地项目的一个文档说明
- 允许你制定你项目中所使用的node包版本
- 偏于给其他人共享
将部分package.json的内容列举如下：
{
"name": "react-webpack-babel",//名称项目，全部小写，不能有空格
"version": "1.0.0", // 项目版本号，最好遵守GNU版本号管理
"description": "",
"main": "index.js",//目录中启动文件名称（入口文件），一般都是index.js
"scripts": {
"test": "echo "Error: no test specified" && exit 1"//一般默认为一个test空文件夹，用作写测试代码
},
"keywords": [],//项目的关键词
"author": "",
"license": "ISC",
"devDependencies": { // 开发或者测试时，依赖的包
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react-hot-loader": "^1.3.1",
"webpack": "^3.0.0-rc.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": { //正式使用时，依赖的包
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
webpack 安装
npm install webpack --save-dev //作用：给项目安装webpack
此时会发现多出来一个 node_modules 文件夹，这里存放着项目所依赖的npm包的地方
--save-dev :表示将会把webpack的名称写入package.json,并且会写入到“devDenpendencies”项中
--save:表示会写入的是“dependencies”项
webpack 测试
在项目文件夹下新建index.js文件，里面写入：
console.log("this is a javascript file for test");
如果webpack是非全局安装，则：
node_modules/.bin/webpack index.js bundle.js //
将index.js文件打包成为bundle.js的文件。后一个参数是你想生成的文件名称
如果想webpack全局安装，则：
npm install webpack -g //全局安装
全局安装后，运行的命令如下：
webpack index.js bundle.js //意思是：将index.js文件打包成为bundle.js的文件,后一个参数是你想生成的文件名称
运行后会发现多了一个bundle.js文件
node bundle.js this is a javascript file for test.//输出结果
新建一个html文件，引入bundle.js
// index.html
<!DOCTYPE html>
<html>
<head>
<title>react webpack boilerplate</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
打开 index.html ,可以在浏览器的控制台看到输出结果
webpack 的配置文件
新建 webpack.config.js文件，输入如下：
var path = require('path');
var webpack = require('webpack');
module.exports = {
// webpack 进行打包的入口文件，这里 webpack 从根目录下的 index.js 开始进行打包
entry: [
'./index'
],
// webpack 打包后的输出文件的路径
output: {
path: path.join(__dirname, 'dist'), // 文件放至当前路径下的 dist 文件夹
filename: 'bundle.js', // 将打包后的输出文件命名为 bundle.js
}
}
将HTML文件的引用路径改为：
<script src="./dist/bundle.js"></script>
再将webpack 安装在本地：
npm install webpack --save-dev
现在运行
npm install index.js bundle.js
刚开始会报错，但是你会发现生成了dist文件，在执行一次该命令，可以实现其效果。
如果有两个js文件是如何处理：
新建 a.js
var a = 1; module.exports = a;
在index.js中加入下列语句：
var a = require("./a.js")//“./”表示当前目录
console.log("a = ", a);
再输入： npm index.js bundle.js 即可。
现在我们不需要在index.html中用script 标签分别来引入 index.js 和 a.js两个文件了，直接引入 bundle.js 这一个就行了。 这种方式很适合当需要引用很多的资源时，简单方便。
安装 web-dev-server
npm i webpack-dev-server --save-dev
新建server.js文件
// server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var server = new WebpackDevServer(webpack(config)); //创建了一个webpack dev server,这是一个
//node.js express 服务器
server.listen(3000, 'localhost', function(err, result) {
if (err) {
return console.log(err);
}
return console.log('listening at locahost:3000...');
})
在webpack.config.js的output这一项中加上：
publicPath :"/static"
server.js修改为：
var server = new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath
});
把 index.html 中对bundle.js 的引用路径改为： "./static/bundle.js"
运行 node server.js 在浏览器中输入 http://localhost:3000查看效果
在package.json中加上下面这一项
"scripts": {
"start": "node server.js"
},//效果是： 可以用 npm start 来代替上面的 node server.js 这两者是等价的 有的教程里 写成 "start":"webpack",相当于把npm的start命令指向webpack命令
Babel
Babel 是转码器，可以将ES6代码转化为ES5代码。从而在现有的环境中执行。（由于ES6中有些语法还没有得到广泛支持）
配置文件
Babel 的配置文件是 .babelrc，存放在项目的根目录下。使用Babel之前，首先是配置这个文件。
该文件是用来设置转码规则和插件的
在项目中，需要安装这样几个package
npm install --save-dev babel-loader babel-core npm install babel-preset-es2015 --save-dev npm install babel-preset-stage-0 --save-dev
npm install babel-cli --save-dev
在 .babelrc中写入如下内容：
{
”presets”:["es2015", "stage-0"] //presets 字段设定转码规则，
"plugins":[]
}
webpack.config.js 文件进行修改：
module: {
loaders: [{
test: /.js$/,
loaders: ['babel-loader'], //注意：很多教程写的是 babel ，但是新版的webpack要求输入完整，不能丢弃loader
include: path.join(__dirname, 'src')
}]
},
devServer: {
stats: 'errors-only'
}
安装React
npm install react react-dom --save // 安装react的package npm install babel-preset-react // 为了让babel对react进行处理
在 .babelrc 文件中加入： "presets":["es2015","stage-0","react"]
新建一个组件：
在index.html 中加上这样的一个元素：
<div id="app"></div> //在此部分进行渲染
新建一个src文件夹，然后在src文件夹下新建两个文件 App.js index.js
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
./src/App.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
console.log('%c%s', 'font-size:20px;color:red', 'Something happened.');
return (
<div>This is a react boilerplate project with webpack and es6.</div>
);
};
}
可以用 npm start 查看效果
安装 react-hot-loader
目的是：实现浏览器自动刷新的效果。
安装 react-hot-loader
npm install react-hot-loader --save-dev
在server.js 中加一行
var server = new WebpackDevServer(webpack(config), {
stats: config.devServer.stats,
hot: true,
publicPath: config.output.publicPath
});
webpack.config.js 修改如下：
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
loaders: [{
test: /.js$/,
loaders: ['react-hot-loader', 'babel'-loader], //注意加loader，还要注意顺序
include: path.join(__dirname, 'src')
}]
plugins:[
new webpack.HotModuleReplacementPlugin()
]
到此模板项目完成
输入 npm start, 运行效果为
