React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化
工程初始化
确保已经安装了node，npm包管理工具会随node一起安装。
可用以下方式安装依赖包：
# 安装到全局环境 npm install 依赖包[@版本号] -g # 安装到当前环境并添加到package.json的dependencies部分 npm install 依赖包[@版本号] --save # 安装到当前环境并添加到package.json的devDependencies部分 npm install 依赖包[@版本号] --save-dev
创建react-webpack-demo目录并进入：
生成package.json
npm init --yes
安装webpack
npm install webpack --save-dev
安装webpack-dev-server
npm install webpack-dev-server --save-dev
webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过Socket.IO与服务器通信。
服务器端的每次改动与重新构建都会被通知到页面上。还提供了如模块替换这样强大的功能。
安装Babel
安装babel-core核心模块
npm install babel-core --save-dev
安装babel的ES6和React语法包
npm install babel-preset-es2015 babel-preset-react --save-dev
配置Babel
根目录下配置.babelrc
{
"presets": ["es2015","react"]
}
安装ESLint
安装ESLint loader
npm install eslint@3.19.0 --save-dev
安装ESLint的第三方配置规则eslint-config-airbnb
npm install eslint-config-airbnb --save-dev
eslint-config-airbnb需要以下3个插件支持：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
配置ESLint
根目录下配置.eslintrc.js
module.exports = {
"parserOptions": {
"ecmaVersion": 7,// ECMAScript版本，7为ES7
"sourceType": "module",//默认script，如果代码是ECMAScript模块，设置为module
"ecmaFeatures": { // 使用额外的语言特性
"jsx": true // 启用JSX
}
},// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
// 避免访问未定义的环境变量而发出告警
"env": {
"es6": true,"node": true,"browser": true,},// 脚本在执行期间访问的额外的全局变量
// 避免访问未定义的环境变量而发出告警
"globals": {
"document": true,"navigator": true,"window":true,"node":true
},// 继承第三方校验规则eslint-config-airbnb
"extends": "airbnb",// eslint-config-airbnb包括了以下3个插件
"plugins": [
"react","jsx-a11y","import"
],// 定制自己的规则
"rules": {
"comma-dangle": ["error","never"],// 要求或禁止末尾逗号：不允许逗号
"indent": ["error",4],// JavaScript代码强制使用一致的缩进：4格缩进
}
};
安装webpack loader
Webpack有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
Webpack 默认只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
安装eslint-loader整合eslint：
npm install eslint-loader --save-dev
安装babel-loader整合babel：
npm install babel-loader --save-dev
安装style-loader css-loader等，转换对应类型文件：
npm install style-loader css-loader less-loader sass-loader file-loader url-loader --save-dev
css-loader 用于打包css文件
style-loader 用于将编译完成的css插入html中
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css
file-loader 用于打包文件
url-loadder 用于打包图片
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
url-loader是对file-loader的上层封装。一般限制小图片直接转成 base64 可以用 url-loader，其他情况都用 file-loader。
安装webpack plugin
与loader专注于处理资源内容不同，plugin功能更广更强大。plugin可以实现那些loader实现不了或者不适合在loader实现的功能，比如自动生成项目的HTML页面、向构建过程中注入环境变量等。
安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
安装uglifyjs-webpack-plugin，用于JS代码压缩
npm install uglifyjs-webpack-plugin --save-dev
配置webpack
根目录配置webpack.config.js：
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH,'src');
var BUILD_PATH = path.resolve(ROOT_PATH,'dist');
module.exports = {
entry: {
index: path.resolve(SRC_PATH,'index.jsx')
},output: {
path: BUILD_PATH,filename: 'js/[name].[hash:5].js'
},// 开启dev source map
devtool: 'eval-source-map',// 开启 webpack dev server
devServer: {
historyApiFallback: true,hot: true,inline: true
//progress: true
},resolve: {
extensions: ['.js','.jsx']
//root: APP_PATH
},module: {
// 配置preLoaders,将eslint添加进去
loaders: [
{
test: /\.jsx?$/,loaders: ['eslint-loader'],include: SRC_PATH,enforce: 'pre'
},{
test: /\.jsx?$/,loaders: ['babel-loader'],exclude: path.resolve(ROOT_PATH,'node_modules')
}
]
},// 配置plugin
plugins: [
new webpack.DefinePlugin({
'process.env.API_ENV': '"development"'
}),new webpack.optimize.UglifyJsPlugin({
sourceMap: true,}),new HtmlwebpackPlugin({
title: 'react-webpack-demo',filename: 'index.html',template: path.resolve(SRC_PATH,'templates','index.html'),minify: {
removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,removeScriptTypeAttributes: true,removeStyleLinkTypeAttributes: true,removeAttributeQuotes: true
}
})
]
};
上面的配置把app文件夹的app.jsx作为入口，用配置好的babel-loader处理它，在Babel处理前先用ESLint检查代码格式，最后使用HtmlwebpackPlugin在build文件夹中生成处理后的HTML文件。我们还添加了一个resolve的参数，把JSX扩展名添加进去，从而支持JS中import加载JSX扩展名的脚本。
安装核心功能包
安装React依赖包
npm install react react-dom --save
安装react-redux依赖包
npm install redux --save npm install redux-actions --save npm install react-redux --save
安装react-router依赖包
npm install react-router --save npm install react-router-redux --save
安装redux调试工具包
npm install redux-devtools --save-dev
创建项目入口模块
根目录下创建src目录：
新建/src/index.jsx：
import React from 'react';
import ReactDOM from 'react-dom';
function Index() {
return (
<div className="container">
<h1>Hello React!</h1>
</div>
);
}
ReactDOM.render(<Index />,document.getElementById('root'));
export default Index;
创建渲染页面
创建/scr/templates/index.html：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="root"></div> </body> </html>
运行程序
"scripts": {
"build": "webpack","dev": "webpack-dev-server --hot"
}
运行：
npm run dev
webpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080
开发中可能还依赖各种中间件和第三方工具。具体用到时再安装吧。
代码：https://github.com/zhutx/reac...
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化