├── app
├── common
│ └── main.css
├── components
│ └── App.js
├── index.tmpl.html
└── main.js
├── npm-debug.log
├── package.json
├── readme.md
└── webpack.config.js
/app/common/main.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | -ms-text-size-adjust: 100%;
4 | -webkit-text-size-adjust: 100%;
5 | }
6 |
7 | *, *:before, *:after {
8 | box-sizing: inherit;
9 | }
10 |
11 | body {
12 | width: 100%;
13 | height: 100%;
14 | margin: 0;
15 | background: #eee;
16 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
17 | overflow-x: hidden;
18 | }
19 |
20 | h1, h2, h3, h4, h5, h6, p, ul {
21 | margin: 0;
22 | padding: 0;
23 | font-weight: 100;
24 | }
25 |
26 |
27 | a {
28 | color: hsl(200, 50%, 50%);
29 | text-decoration: none;
30 | }
31 |
--------------------------------------------------------------------------------
/app/components/App.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 |
3 | export default class extends Component{
4 |
5 | render(){
6 | return(
7 |
8 |
hello react
9 |
10 | )
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/app/index.tmpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Webpack Sample Project
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import App from './components/App';
5 |
6 | render((
7 |
8 | ), document.getElementById('root'))
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-template",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --progress"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "^6.5.1",
13 | "babel-core": "^6.18.0",
14 | "babel-loader": "^6.2.5",
15 | "babel-plugin-react-transform": "^2.0.2",
16 | "babel-preset-es2015": "^6.18.0",
17 | "babel-preset-react": "^6.16.0",
18 | "css-loader": "^0.25.0",
19 | "extract-text-webpack-plugin": "^1.0.1",
20 | "file-loader": "^0.9.0",
21 | "html-webpack-plugin": "^2.24.0",
22 | "json-loader": "^0.5.4",
23 | "postcss-loader": "^1.0.0",
24 | "react": "^15.3.2",
25 | "react-addons-css-transition-group": "^15.3.2",
26 | "style-loader": "^0.13.1",
27 | "url-loader": "^0.5.7",
28 | "webpack": "^1.13.2",
29 | "webpack-dev-server": "^1.16.2"
30 | },
31 | "dependencies": {
32 | "react-dom": "^15.3.2",
33 | "react-motion": "^0.4.5",
34 | "react-router": "^3.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # react + es6 + webpack 架构模板
2 |
3 | 项目目录结构
4 | -----------------
5 | |--app （开发目录）
6 | | |-------common（公共文件，例如css,工具代码等)
7 | | |-------components (组件目录)
8 | | |-------pages （页面目录,例如可以存放首页，分类页，个人中心等页面）
9 | | |-------static （存放静态文件，图片等）
10 | | |-------build (打包输出目录)
11 | | |-------index.tmpl.html (html模板文件)
12 | | |-------main.js （入口文件，可以在webpack.config.js中配置）
13 | |
14 | |-------|-node_module （nodejs模块）
15 | |-------|-package.json （npm 配置文件）
16 | |-------|-webpack.config.js （webpack 配置文件）
17 |
18 | _使用方法：_
19 | -----------------
20 |
21 | ### 1. `git clone https://github.com/cooleye/react-template.git`
22 | ### 2. `cd react-template` 进入项目目录
23 | ### 3. `npm install` 安装依赖
24 | ### 4. `npm start` 运行项目
25 |
26 |
27 | -----------------------------------------
28 |
29 | #### *或者你也可以从零开始，先执行 npm init,创建 package.json，然后根据需要把依赖的模块安装上*
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
3 |
4 | module.exports = {
5 | devtool: 'eval-source-map',
6 |
7 | entry: __dirname + "/app/main.js",
8 | output: {
9 | path: __dirname + "/build",
10 | filename: "bundle.js"
11 | },
12 |
13 | module: {
14 | loaders: [
15 | { test: /\.json$/, loader: "json" },
16 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel' ,query: { presets: ['es2015','react'] }},
17 | { test: /\.css$/, loader: 'style!css?modules!postcss' },
18 | //配置file-loader，加载图片，字体资源
19 | { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
20 | ]
21 | },
22 |
23 | postcss: [
24 | require('autoprefixer')//调用autoprefixer插件
25 | ],
26 |
27 |
28 | plugins: [
29 | new HtmlWebpackPlugin({
30 | template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
31 | })
32 | ],
33 |
34 | devServer: {
35 | port:8080,
36 | //colors: true,
37 | //historyApiFallback: true,
38 | //inline: true
39 | }
40 | }
41 |
--------------------------------------------------------------------------------