一步一步使用webpack创建react项目

写在前面的话
2016年6月首次接触到react.js,由于某些原因，对react其实不是很了解。当时对webpack的使用也知之甚少，根本不会搭建react项目。最近，由于一个项目使用到react.js,花了点时间，自己搭建了一个react的项目。将步骤记录于此，以免忘记。
项目目录结构：
创建项目步骤：
安装依赖包：
1. 首先确定已安装node.js
2. 使用命令行进入F:\nodeSpace\dev,输入mkdir plan-app 并进入plan-app 目录下；
3. 在命令行中输入npm init ,然后一直回车直到提示输入yes或no，并输入yes;
4. 安装webpack相关的插件，输入npm install --save webpack webpack-dev-server html-webpack-plugin;
6. 安装babel相关的插件，输入npm install --save babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0;
7. 安装css样式和图片导入插件，输入npm install --save css-loader style-loader url-loader file-loader;
8. 安装react，输入npm install --save react react-dom;
到此，react项目的依赖包基本安装完毕。当然完整项目你还必须安装路由以及其他你要用到的插件，如：redux，antd等，这里只介绍到可以在页面显示“hello react”；
接下来时配置webpack的配置文件：

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

module.exports = (env,args)=>{
    return {
        context:path.resolve(__dirname,'src'),
        entry:()=>path.resolve(__dirname,'src/index.jsx'),
        output:{
            filename:'bundle.[hash].js',
            path:path.resolve(__dirname,'src/dist'),
            publicPath:'/'
        },
        module:{
            rules:[{
                test:/\.jsx?$/,
                include:[path.resolve(__dirname,'src')],
                exclude:[path.resolve(__dirname,'node_modules')],
                enforce:'pre',
                use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015','react','stage-0']
                    }
                }]
            },{
                test:/\.css$/,
                use:[{
                    loader:'style-loader'
                },{
                    loader:'css-loader'
                }]
            },{
                test:/\.(jpg|gif|png)/,
                use:[{
                       loader:'url-loader',
                       options:{
                        limits:3400
                       }
                }]
            }]
        },
        resolve:{
                modules : [path.resolve(__dirname,'node_modules'),path.resolve(__dirname,'src')],
                extensions:['.js','.json','.jsx']
        },
        devtool : "eval-source-map",
        devServer:{
            hot : true,
            contentBase:path.join(__dirname,'src'),
            compress:true,
            historyApiFallback:true,
            inline :true
        },
        plugins:[
                        new HtmlWebpackPlugin({
                                hot: true,
                                lazy: true,
                                inject:'body',
                                       hash:true,
                                template: path.resolve(__dirname,"src/index.html")
                       }),
            new webpack.HotModuleReplacementPlugin(),
                        new webpack.optimize.UglifyJsPlugin(),
                        new webpack.optimize.AggressiveMergingPlugin()
         ]   
    }
}

然后在src目录下创建index.jsx和index.html

//index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>redux demo</title>
</head>
<body>
       <div id="content"></div> 
</body>
</html>

import React from  'react';
import ReactDOM from 'react-dom';
const App = ()=>(<div>
     <h3>hello react</h3>
</div>);

ReactDOM.render(<App/>,document.getElementById('content'));

至此，整个demo完成。

一步一步使用webpack创建react项目

猜你喜欢