React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
 React技术栈之Webpack环境搭建（三）打包性能优化

工程初始化

确保已经安装了node，npm包管理工具会随node一起安装。

可用以下方式安装依赖包：

@H_502_14@# 安装到全局环境 npm install 依赖包[@版本号] -g # 安装到当前环境并添加到package.json的dependencies部分 npm install 依赖包[@版本号] --save # 安装到当前环境并添加到package.json的devDependencies部分 npm install 依赖包[@版本号] --save-dev

创建react-webpack-demo目录并进入：

生成package.json

@H_502_14@npm init --yes

安装webpack

@H_502_14@npm install webpack --save-dev

安装webpack-dev-server

@H_502_14@npm install webpack-dev-server --save-dev

webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过Socket.IO与服务器通信。
服务器端的每次改动与重新构建都会被通知到页面上。还提供了如模块替换这样强大的功能。

安装Babel

安装babel-core核心模块

@H_502_14@npm install babel-core --save-dev

安装babel的ES6和React语法包

@H_502_14@npm install babel-preset-es2015 babel-preset-react --save-dev

配置Babel

根目录下配置.babelrc

@H_502_14@{ "presets": ["es2015","react"] }

安装ESLint

安装ESLint loader

@H_502_14@npm install eslint@3.19.0 --save-dev

安装ESLint的第三方配置规则eslint-config-airbnb

@H_502_14@npm install eslint-config-airbnb --save-dev

eslint-config-airbnb需要以下3个插件支持：

@H_502_14@npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

配置ESLint

根目录下配置.eslintrc.js

@H_502_14@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：

@H_502_14@npm install eslint-loader --save-dev

安装babel-loader整合babel：

@H_502_14@npm install babel-loader --save-dev

安装style-loader css-loader等，转换对应类型文件：

@H_502_14@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

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

安装uglifyjs-webpack-plugin，用于JS代码压缩

@H_502_14@npm install uglifyjs-webpack-plugin --save-dev

配置webpack

根目录配置webpack.config.js：

@H_502_14@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依赖包

@H_502_14@npm install react react-dom --save

安装react-redux依赖包

@H_502_14@npm install redux --save npm install redux-actions --save npm install react-redux --save

安装react-router依赖包

@H_502_14@npm install react-router --save npm install react-router-redux --save

安装redux调试工具包

@H_502_14@npm install redux-devtools --save-dev

创建项目入口模块

新建/src/index.jsx：

@H_502_14@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：

@H_502_14@<!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>

运行程序

在package.json中添加自定义命令：

@H_502_14@"scripts": { "build": "webpack","dev": "webpack-dev-server --hot" }

运行：

@H_502_14@npm run dev

webpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080

开发中可能还依赖各种中间件和第三方工具。具体用到时再安装吧。

代码：https://github.com/zhutx/reac...