React的Webpack项目搭建

前端感觉是个非常用前途的行业,发展太快了,赶紧学点新知识。

1. 创建项目结构

1.1 资源创建

mkdir webpack ; cd webpack
npm init
touch .gitignore # 使用git版本管理工具
touch webpack.config.js # webpack配置文件

1.2 Git忽略文件

修改.gitignore文件,加入以下默认忽略文件

logs
*.log
.grunt
node_modules
bower_components
build

1.3 通过npm安装项目所需要的依赖包

  • webpack相关
npm i webpack webpack-dev-server html-webpack-plugin --save-dev
  • css/scss/less样式文件,图片文件相关包
npm i css-loader style-loader sass-loader node-sass less less-loader --save-dev
npm i file-loader url-loader --save-dev
  • babel/react/es6支持
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
npm i jshint jshint-loader --save-dev
npm i react react-dom --save
  • bootstrap/jquery/moment支持包
npm i bootstrap --save-dev
npm i jquery moment --save-dev

1.4 创建工程目录如下

├── app
│   ├── components
│   │   ├── plist.jsx
│   │   └── search.jsx
│   ├── index.jsx
│   └── utils
├── package.json
├── templates
│   ├── index.html
│   └── mobile.html
└── webpack.config.js

1.5 编辑webpack.config.js文件

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('HtmlwebpackPlugin');

var ROOT_PATH = path.resolve('__dirname');
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, build'');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');

module.exports = {
    entry: {
        app: path.resolve(APP_PATH, 'index.jsx'),
        mobile: path.resolve(APP_PATH, 'mobile.jsx'),
        vendors: ['jquery', 'moment']
    },
    
    output: {
        path: BUILD_PATH,
        filename: '[name].js'
    },
    
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    
    devtool: 'eval-source-map',
    
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
        proxy: {
            '/api/*': {
                target: 'http://localhost:8080',
                secure: false
            }
        }
    },
    
    module: {
        preLoaders: [
            {
                test: /\.jsx?$/,
                include: APP_PATH,
                loader: "jshint-loader"
            }
        ],
        
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                include: APP_PATH,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'scss']
            },
            {
                test: /\.(jpg|png)$/,
                loader: 'url?limit=40000'
            }
        ]
    },
    
    jshint: {
        "esnext": true
    },
    
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            minimize: true
        }),
        
        new HtmlwebpackPlugin({
            title: 'My first react app',
            template: path.resolve(TEM_PATH, 'index.html'),
            filename: 'index.html',
            chunks: ['app', 'vendors'],
            inject: 'body'
        }),
        
        new HtmlwebpackPlugin({
            title: 'Hello mobile app',
            template: path.resolve(TEM_PATH, 'mobile.html'),
            filename: 'mobile.html'
        }),
        
        new wenpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    ]
}

1.6 在package.json中添加

"scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot --inline",
    "build": "webpack --progress --profile --colors",
    "test": "test",
},

2. 修改页面内容

2.1 修改index.jsx

import '../node_modules/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class App extends React.Component {
    constructor() {
        super();
    }
    
    render() {
        return (
            <div className="container">
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">Search Github Users</h3>
                </section>
            </div>
        );
    }
};

const app = document.createElement('div');
$(body'').append(app);
ReactDOM.reder(<App />, app);

2.2 运行查看效果

npm run dev