基于React+Webpack+ant-design开发的网站

一、什么是webpack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
我学webpack是看一个大牛写的博客，特别好，这里推荐下http://www.jianshu.com/p/42e11515c10f

二、什么是Ant Design

Ant Design是蚂蚁金服体验技术部做的前端 UI 基于react的组件库。
官网：https://ant.design/docs/react/getting-started-cn

三、创建项目

安装webpack

  npm install -g webpack

创建个文件夹demo，在该目录下打开命令提示符，输入

npm init

然后一直回车回车就好了，这时里的目录里出现了package.json
打开package.json 复制底下代码（个人总结的常用的模块，其他若你们项目需要的就自行安装）

{
  "name": "你的项目名",
  "version": "1.0.0",
  "description": "项目描述",
  "main": "app/index.js",
  "scripts": {
    "test": "",
    "start": "node server",
    "build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
    "eslint": "eslint ."
  },
  "keywords": [
    "webpack",
    "react",
    "web"
  ],
  "author": "ouxiaojie",
  "license": "MIT",
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.0.0",
    "react-router": "^4.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  }
}

然后在命令提示符里输入安装各种模块

npm install

图片.png

在文件夹demo里创建以下文件

图片.png

在webpack.config.js文件里复制以下代码

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        'react-hot-loader/patch',
        // path.join(__dirname, 'app/final/index.js')
        path.join(__dirname, 'app/index.js')
    ],
    output: {
        path: path.join(__dirname, './dist/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            // template: './app/index.tpl.html',
            template: './index.tpl.html',
            inject: 'body',
            filename: './index.html'
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        // resolve: {
        //     extensions: ['', '.js', '.json']
        // },
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['react', 'es2015']
            }
        }, {
            test: /\.json?$/,
            loader: 'json'
        }, {
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.less/,
            loader: 'style-loader!css-loader!less-loader'
        }, {
          test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192',
        }
        ]
    }
};

在server.js文件里复制以下代码

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    // It suppress error shown in console, so it has to be set to false.
    quiet: false,
    // It suppress everything except error, so it has to be set to false as well
    // to see success build.
    noInfo: false,
    stats: {
        // Config for minimal console.log mess.
        assets: false,
        colors: true,
        version: false,
        hash: false,
        timings: false,
        chunks: false,
        chunkModules: false
    }
}).listen(3000, 'localhost', function (err) {
    if (err) {
        console.log(err);
    }

    console.log('Listening at localhost:3000');
});

webpack的自动化打包，热更新就配置好啦！代码有疑问的就在上面我推荐的大牛写的webpack简书里找答案啦~

然后在index.tpl.html里输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

在app文件夹里新建两个文件

图片.png

在index.js文件里输入：

import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './root'

render(
    <AppContainer>
        <Root />
    </AppContainer>,
    document.getElementById('root')
);

if(module.hot){
    module.hot.accept('./root',() =>{
        const NewRoot = require('./root').default;
        render(
            <AppContainer>
                <NewRoot />
            </AppContainer>,
            document.getElementById('root')
        );
    });
}

在root.js里输入：

import React, { Component } from 'react';
export default class Root extends Component {
    render() {
        return (
            <div>Hello 张艺兴~</div>
        );
    }
};

保存文件，在命令提示符输入

npm run build

图片.png

看到successfully就打包成功啦~
然后在浏览器中输入

http://localhost:3000/

能看到

图片.png

接着 安装antd 组件

npm install antd --save-dev 

接着安装以下插件，这样你用antd的组件时就不用手动写import啦~

npm install babel-plugin-import --save-dev  // 此插件安装前，必须先安装 file-loader
npm install babel-plugin-transform-runtime --save-dev 

然后在webpack.config.js里添加相应的loader

loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['react', 'es2015'],
                plugins: [//修改这里的
                    ["import", {libraryName: "antd", style: "css"}]//修改这里的
                ] //修改这里的
            }
        }, 

配置好了，就可以测试啦
把root.js里的代码修改为

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
export default class Root extends Component {
    render() {
        return (
             <DatePicker />
        );
    }
};

然后保存文件，在命令提示符输入

npm run build

在浏览器的http://localhost:3000/中看到

图片.png

这样就把React和Webpack和ant-design的各种配置都搭好了，可以开始写代码了~