一步一步使用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
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>redux demotitle>
head>
<body>
<div id="content">div>
body>
html>import React from 'react';
import ReactDOM from 'react-dom';
const App = ()=>(
hello react
);
ReactDOM.render(至此，整个demo完成。