最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面，Ant Design 团队不是很熟悉，webpack react等用的不多，所以自己花了一天时间，把相关知识点撸了一遍，给团队做了个培训。下面主要是一个培训的纲领，整个流程可以通畅的跑下来；主要是webpack+es2015+react+Ant Design。当然，ant design 自己有一套框架打包平台，有兴趣的也可以研究。

官方文档

参考webpack官方文档，点击一下链接
doc.webpack-china.org/guides/
doc.webpack-china.org/concepts/

安装nodejs

忽略

安装cnpm

npm 很多时候网络不好使，所以使用cnpm更方便，如果cnpm安装不了，可以翻墙安装

npm install -g cnpm

安装webpack

本地安装

cnpm install --save-dev webpack 
cnpm install --save-dev webpack@<version>

全局安装

cnpm install --global webpack

创建webpack项目

mkdir webpack-demo && cd webpack-demo 
cnpm init -y 
cnpm install --save-dev webpack

bundle 文件

一般代码，直接在html文件中引入，js文件，比如下面的index.js

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

使用webpack 后，在html引入一个bundle.js文件，然后通过webpack 会把所有的源代码打包到bundle.js文件中。

  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="bundle.js"></script>
   </body>
  </html>

webpack配置文件

const path = require('path');  
module.exports = {   
  entry: './src/index.js',  
   output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')   }};

入口Entiry

./src/index.js

输出

  output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')

使用import

不是用webpack的情况下，代码在script标签里面引入，此时可以直接使用

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

使用webpack之后，可以直接使用使用import语句引入在js文件中引入js文件

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }
  document.body.appendChild(component());

当然此时需要使用以下命令安装lodash包：

cnpm install lodash

打包命令

原始命令

./node_modules/.bin/webpack src/index.js dist/bundle.js

NPM 脚本(NPM Scripts)

通过 ‘创建webpack项目’ 的命令，可以创建package.json,如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 配置webpack脚本命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  ...
  },
}

运行命令 npm run build 相当于运行原始命令。

webpack基本概念

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。你可以通过在配置中指定一个 output 字段，来配置这些处理过程

Loader

让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效，然后你就可以利用 webpack 的打包能力，对它们进行处理。

插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要require()它，然后把它添加到plugins
数组中。

使用 Loader

CSS Loader

安装 css loader

cnpm install --save-dev style-loader
cnpm install --save-dev css-loader

配置CSS Loader

{
         test: /\.css$/,
          use: [
                'style-loader',
                'css-loader'
                ]
        }

使用css文件

引入css文件

import style from '../css/style.css';

需要使用css样式的地方直接使用

 element.classList.add('hello');

加载图片资源File Loader

安装File Loader

cnpm install --save-dev file-loader

配置File Loader

{
         test: /\.(png|svg|jpg|gif)$/,
         use: [
                'file-loader'
              ]
        },

使用图片资源

引入图片资源

import icon from '../res/icon.png';

在使用的地方，直接使用

var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);

在css中直接引入图片资源即可：

 background: url('../res/icon.png');

加载字体文件 File Loader

配置字体加载

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
         'file-loader'
       ]
}

在css中使用字体文件

@font-face {
   font-family: 'MyFont';
   src:  url('../res/my-font.woff2') format('woff2'),
         url('../res/my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

ES2015 && React

要使用ES2015语法和jsx语法，需要使用bable来转换。 bable-loader相关知识点参考：

更多loader参考：
doc.webpack-china.org/loaders/

安装babel-loader

cnpm install babel-loader babel-core babel-preset-env webpack

配置bable-loader

 {
            test: /\.js$|\.jsx$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react','es2015']
                }
            }
 },

其中 presets: ['react','es2015'] ，表示支持react和es2015语法。

使用es2015

一个简单的示例 print.js

export default function printMe() {
    console.log('I get called from print.js  !');
}

在index.js中使用方法printMe,首先引入文件：

import print from './print.js';

然后使用printMe方法，此时变成了print:

print();

使用react

要使用react，首选需要安装。

安装react

cnpm install react --save-dev
cnpm install react-dom --save-dev

编写react组件

import React from 'react';
export default class Hello extends React.Component {
    render() {
        return <div><h1>hi alienzhou!</h1><h2>fdsayoyoyofdasfdsa1</h2></div>;
    }
}

使用react组件

首先引入react组件，代码如下：

import Hello from './components/hello.jsx';

然后使用组件，代码如下：

var element = document.createElement('div');
var mountNode = element;
    ReactDOM.render(<Hello/>, element);
    ReactDOM.render(<span><DatePicker/><DatePicker/></span>,element);
    ReactDOM.render(<Hello><Hello> , mountNode);

使用ant design 组件

安装ant design

cnpm install antd --save-dev

使用ant design

引入css文件

import 'antd/dist/antd.css';

引入相关组件

import { DatePicker } from 'antd';
import { Tabs } from 'antd';
import { Steps } from 'antd';

使用组件

  ReactDOM.render(
        <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="Tab 1" key="1"><DatePicker /></TabPane>
            <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
            <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
        </Tabs>
        , mountNode);

react学习资源

中文文档
doc.react-china.org/

Ant Design 学习资源

文档参考链接
design.alipay.com/develop/mob…

webpack+es2015+react+Ant Design纲领