React系列---Webpack环境搭建（一）手动搭建

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'],
                include: SRC_PATH,
                exclude: path.resolve(ROOT_PATH, 'node_modules')
            }
        ]
    },
    // 配置plugin
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_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>

运行程序

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

"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环境搭建（三）打包性能优化