引言
最近React作为当前最为火热的前端框架。最近也相继而出来相关ES7的新语法。
当然，在使用React开发web项目的时候，不得不提到的就是与之配套的相应的打包技术，之前上文已经简单的提到React+webpack的相关环境搭建。
不过昨天，在技术群聊里，又有人提到，如何更好的利用webpack进行开发与打包。那么今天，我就用一个例子来解释一下，利用webpack来打包react项目与发布的相关配置（包含Request请求和React-router的路由跳转哦）。
准备工作
当然需要安装WebStrom和node.js啦~至于下载地址，请看上文：React+Webpack+ES6环境搭建(自定义框架)
让我们跑起来吧
首先来说说，本项目基本用到的一些开发组件(package.json)：
- 开发中需要用到的，我全部放在devDependencies(npm install ...... --save-dev)中;
- 项目中有用到的组件，我全部放在dependencies(npm install ...... --save)中;
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-polyfill": "^6.16.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"open": "0.0.5",
"react-hot-loader": "^3.0.0-beta.6",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"echarts": "^3.3.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.2",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-router": "^3.0.0"
}
接下来，就是server.js的配置，利用于调试以及用户服务端口配置
/**
* 创建时间：2016年9月19日 10:12:44
* 创建人：JaminHuang
* 描述：用于服务端口配置
*/
'use strict';
var open = require('open');
var webpack =require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
publicPath:config.output.publicPath,
hot:true,
historyApiFallback: true,
quiet: false,
noInfo: false,
filename: "index.js",
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
headers: {"X-Custom-Header": "yes"},
stats: {colors: true}
});
server.listen(3010, function (err, result) {
if (err)console.log(err);
open('http://localhost:3010');
});
server.js
配置完成后，并且在建立index.js的主入口文件后（具体怎么建立，请看前文环境搭建，这里就不重复讲了）。下面就是核心，webpack.config.js的配置啦。不过这里项目用引用了热加载（react-hot-loader），而该组件在更新版本3.0.0之后，有一些小坑，需要修复，下文会提到。
首先，可以配置调试文件（webpack.config.js）和发布配置文件（webpack.production.config.js）
'use strict';
var path = require('path');
var webpack = require('webpack');
var config = {
devtool: 'source-map',
entry: {
app: ['webpack-dev-server/client?http://localhost:3010', 'webpack/hot/dev-server', './src/index']
},
output: {
path: path.join(__dirname, 'public'),
publicPath: '/public/',
//chunkFilename: '[id].chunk.js',
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel', include: path.join(__dirname, 'src')}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
//new webpack.optimize.CommonsChunkPlugin('shared.js'),
new webpack.DefinePlugin({
'process.env': {
'DEBUG': true
}
})
]
};
module.exports = config;
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: false,
debug: false,
stats: {
colors: true,
reasons: false
},
entry: './src/index',
output: {
path: path.join(__dirname, 'public'),
publicPath: '/public/',
//chunkFilename: '[id].chunk.js',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'DEBUG': false
}
}),
//new webpack.optimize.CommonsChunkPlugin('shared.js'),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/}
]
}
};
webpack.production.config
由于调试文件中，引用了热加载的问题，所以这里也提一下上面之前遇到的坑。由于3.0.0版本的react-hot-loader，对于webpack中配置的有些loaders语法不识别，
之前版本的写法：
module: {
loaders: [
{test: /\.js$/, loaders: ['react-hot', 'babel'], include: [path.join(__dirname, 'src')]}
]
},
调整之后的写法，别写需要在之前配置的.babelrc文件中添加一行配置（当然可以写进）：
{
"plugins": ["react-hot-loader/babel"]
}
webpack.config中的配置
module: {
loaders: [
{test: /\.js$/, loader: 'babel', include: path.join(__dirname, 'src')}
]
},
最后，在package.json中配置命令，方便执行就行了：
"scripts": {
"start": "node server.js",
"prod": "webpack --config webpack.production.config.js"
},
这样一些都配置完成了，如需要调试则输入"npm start"就行，如需要发布就可以输入"npm prod"即可
有关发布
这里在说一下，如果想要发布项目的时候，在输入"npm prod"之后，（之前根据webpack已经配置好了目录）只需要到项目跟目录下把public文件夹和index.html拷出来（因为这里举例的webpack发布配置，我并没有将index.html也打包进入public文件夹，所以需要多打包一下）
拷出来后，则可以通过IIS进行项目发布啦。（不过如果利用IIS的话，需要添加URL重写工具）以及在发布的根目录下配置web.config文件，配置URL重写。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<!-- todo: 也许应该过滤掉静态文件 -->
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url="^(?:(?!api).)+" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
扩展内容
这里再，说一些相关扩展的内容：Request请求处理。本项目中利用了一些isomorphic-fetch组件用于帮助请求，项目中我配置了一个公共请求组件：
'use strict';
import fetch from 'isomorphic-fetch';
const baseUrl = "http://xxx";
export function FetchPost(url, data) {
return fetch(`${baseUrl}/${url}`, {
headers: {"Content-Type": "application/json"},
method: 'POST',
body: JSON.stringify(data)
}).then(response=> {
return response.json();
})
}
调用方式：
Request.FetchPost("api/Gather/Sign", data).then(json=>{
if (条件 ) {
//成功执行....
}
else {
//失败执行....
}
})
附录
最后附上我的GitHub上该项目的Demo，如果有需要可以down下来实际操作一下，当然，请别忘记给个Star哈~内容中有分支，一个是项目搭建，一个是百度EChart的Demo，本文例子用master这个分支就可。
https://github.com/JaminHuang/EChartDemo