Webpack 配置 React 开发环境

http://www.ruanyifeng.com/blog/2015/03/react.html
http://reactjs.cn/react/docs/tutorial.html

1.安装 Webpack：npm install -g webpack

2.Webpack 使用一个名为 webpack.config.js

的配置文件

3.要编译 JSX，先安装对应的 loader 并添加es6支持

npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

4.配置文件的编写

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

5.添加css模块的支持

6.添加react的支持

npm install react-dom --save
npm install react-router --save```
Babel针对React的所有的预设插件
```npm install babel-preset-react --save-dev```
由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

query: { presets: ['es2015','react']}

修改代码

import React from "react";

class Hello extends React.Component{
render() {
return (
<div>
Hello, World!
</div>
)
}
}

export default Hello;

index.js

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./components/Hello";

// var func = str => {
// document.querySelector('#app').innerHTML = str;
// };
// func('我现在在使用Babel!');

ReactDOM.render(
<Hello />,
document.querySelector('#app')
);

####7.添加webpack-dev-server 她允许我们可以把本地项目跑在像nginx那样的web服务器上
npm install webpack-dev-server --save-dev
package.json

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

####8.环境变量设置

npm install cross-env --save -dev

"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server --content-base dist/ --hot --inline --colors --open --port 8000"
},

####9.webpack 插件： html-webpack-plugin

npm install html-webpack-plugin --save -dev

var plugins = [
new HtmlWebpackPlugin({//添加的插件,简化创建服务于 webpack bundle 的 HTML 文件
template: 'src/index.html',
inject: 'body',//js添加到底部
hash: true, //每次生成hash值
filename: 'index.html' //文件名字
})
];
plugins:plugins//添加的插件

配置说明

title: 用来生成页面的 title 元素
filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

####10.生产环境的压缩等

//如果在生产环境需要添加压缩
if( isProduction() ) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
test: /(.jsx|.js)$/,
compress: {
warnings: false
},
}),
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname),
verbose: true,
dry: false
})
);
}

####11.添加css支持
npm install css-loader --save-dev
npm install style-loader --save-dev

####12.react 热加载，即页面只刷新一部分，整体刷新

npm install react-hot-loader --save-dev

####13.**React Hot Loading已经过时了，开发者也宣布已经停止维护，现在有一个更强大的babel plugin： React Transform来代替他。**
npm install --save-dev babel-plugin-react-transform
这是个基本的架子，可以通过它完成各种transform，如果想实现Hot Module Replacement (说白了就是页面不刷新，直接替换修改的Component)，再安装一个transform.

npm install --save-dev react-transform-hmr

如果我们还要再来一个在页面上直接显示catch到的错误的transform，（不想打开console看到底有啥错误，直接显示在页面上多好），简单！再安装一个transform:

npm install --save-dev react-transform-catch-errors redbox-react

安装完毕，将支持HMR和Catch Error的present添加到.babelrc

{
"presets": ["react", "es2015"],
//在开发的时候才启用HMR和Catch Error
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}

要让新建的两个transform生效,只需再安装一个present。

npm install babel-preset-react-hmre --save-dev

***
配置文件package.json

{
"name": "fansclub",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server --content-base dist/ --hot --inline --colors --open --port 8000"
},
"author": "chh",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.5.1", //css自动补全
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2", //react 热加载
"babel-preset-es2015": "^6.16.0", //2016->2015
"babel-preset-react": "^6.16.0",// react 支持
"babel-preset-react-hmre": "^1.1.1", //热加载相关
"clean-webpack-plugin": "^0.1.13", //清楚文件
"cross-env": "^3.1.3", //设置环境变量
"css-loader": "^0.25.0", //处理css
"html-webpack-plugin": "^2.22.0", //处理html
"postcss-loader": "^1.0.0", //配合其他css包用
"postcss-px2rem": "^0.3.0", //手机端转化rem
"react-hot-loader": "^1.3.0", //热价载，废弃
"react-transform-catch-errors": "^1.0.2", //报错相关
"react-transform-hmr": "^1.0.4", //react-transform整合前面的
"redbox-react": "^1.3.2", //配合报错插件
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2" //服务器相关
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1"
}
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
// 通过NODE_ENV来设置环境变量，如果没有指定则默认为生产环境
var isProduction = function () {
return process.env.NODE_ENV === 'production';
};
var plugins = [
new HtmlWebpackPlugin({//添加的插件,简化创建服务于 webpack bundle 的 HTML 文件
template: 'src/index.html',
inject: 'body',//js添加到底部
hash: true, //每次生成hash值
filename: 'index.html' //文件名字
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': isProduction()
}
})
];
//如果在生产环境需要添加压缩
if( isProduction() ) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({ //压缩js
test: /(.jsx|.js)$/,
compress: {
warnings: false
},
}),
new CleanWebpackPlugin(['dist'], { //清除内容
root: path.resolve(__dirname),
verbose: true, // Write logs to console.
dry: false //是否删除文件
//"exclude": ["files", "to", "ignore"] 排除文件
})
);
}
module.exports = {
cache: true,
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: '[name].js'
},
watch: true,//自动监听打包
resolve: {//自动补全后缀
root: path.join(__dirname, 'src'),
extensions: ['', '.js', '.jsx']
},
module: {//添加loader
loaders: [
{
test: /.js|jsx$/,
//此处可以设置react-hot 或者不用.bablerc文件
loaders:['babel'],//babel es6->es5
exclude: /(node_modules|bower_components)/
},
{
test: /.css$/,
loader: 'style!css'
}
]
},
postcss: function () {
return [require('autoprefixer')];
},
plugins:plugins//添加的插件
}

.babelrc

{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}