├── .babelrc ├── .gitignore ├── README.md ├── map.js ├── package.json ├── pages ├── html │ ├── page1.html │ ├── page2.html │ ├── page3.html │ └── page4.php └── tpl │ ├── page1.html │ ├── page2.html │ ├── page3.html │ └── page4.php ├── src ├── common │ ├── base.css │ └── index.js ├── page1 │ ├── main.js │ └── style.css ├── page2 │ ├── main.js │ └── style.css ├── page3 │ └── main.js └── page4 │ └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | "es2015", "stage-0" 4 | ], 5 | plugins: [ 6 | "transform-runtime", 7 | "add-module-exports" 8 | ] 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 基于 webpack 的开发多页面项目的脚手架，支持： 2 | 3 | * 代码热替换 4 | * ES2015 5 | 6 | ## 使用 7 | 8 | ```shell 9 | git clone git@github.com:fe-config/generate-pages.git 10 | cd generate-pages 11 | npm install 12 | ``` 13 | 14 | * 开发：`npm run dev` 15 | * 上线：`npm run build` 16 | 17 | ## 结构 18 | 19 | ``` 20 | |--- pages // 页面文件 21 | | |--- tpl // 页面模板 22 | | | |--- page1.html 23 | | | |--- page2.html 24 | | |--- views // 添加css、js后的页面模板 25 | | |--- page1.html 26 | | |--- page2.html 27 | |--- src // 页面css、js 28 | | |--- common // 公共模块 29 | | | |--- index.js 30 | | |--- page1 31 | | | |--- main.js 32 | | | |--- style.css 33 | | |--- page2 34 | | |--- main.js 35 | | |--- style.css 36 | |--- map.js // 页面对应js模块映射 37 | |--- .babelrc // babel 配置文件 38 | |--- webpack.config.js // webpack 配置文件 39 | ``` 40 | 41 | ## 配置 42 | 43 | 修改 `map.js`: 44 | 45 | ```js 46 | var path = require('path') 47 | var ROOT = path.resolve(__dirname) 48 | 49 | module.exports = { 50 | 'page1/main': { // 模块名 51 | "src": ROOT + "/src/page1/main", // 对应页面主模块 52 | "tpl": "page1" // 对应模板名 53 | }, 54 | 'page2/main': { 55 | "src": ROOT + '/src/page2/main', 56 | "tpl": "page2" 57 | } 58 | } 59 | ``` 60 | 61 | `page1/main`: `page1/main` 对应一个页面，模板对应 `pages/tpl/page1.html`，js 模块对应 `src/page1/main.js`。 62 | 63 | 在 `src/page1/main.js` 中： 64 | 65 | ```js 66 | // 为了支持修改模板文件文件时页面自动刷新 67 | if(ENV == 'DEV') { 68 | require('pages/views/page1.html') 69 | } 70 | [使用ProvidePlugin](./src/page3/main.js) 71 | import style from './style.css' // 引入css 72 | import common from 'src/common' // 引入common模块 73 | ``` 74 | 75 | ## 示例 76 | 77 | * [使用externals](./src/page1/main.js) 78 | * [使用公共模块](./src/page2/main.js) 79 | * [使用ProvidePlugin](./src/page3/main.js) 80 | * [使用webpack-dev-server的代理](./src/page4/main.js) 81 | 82 | ## tips 83 | 84 | 这个项目只搭建了最基本的项目需求，肯定不能保证满足所有项目，你可能需要修改： 85 | 86 | * 本项目默认安装 `jquery`，如果不需要，请在 `pageage.json` 和 `webpack.config.js` 中删除 87 | * `resolve` 88 | * 设置 `alias` 不会让你的目录出现 `../../src/page1/main.js` 这样难以识别的目录层级 89 | * `externals` 可以让你正常使用全局 `script` 90 | * `output` 91 | * `filename` 设置为 `[name].[md5].js` 可能是你想要的 92 | * `publicPath` 如果你的 js、css 需要放在 CDN 上，就要修改这个选项了 93 | * 如果你要使用 less / sass / postcss ，需要自己安装对应的 loader 94 | * 没有安装 url-loader / file-loader 95 | 96 | > Have fun in webpack ! 97 | -------------------------------------------------------------------------------- /map.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | 4 | module.exports = { 5 | 'page1/main': { 6 | "src": ROOT + "/src/page1/main", 7 | "tpl": "page1.html" 8 | }, 9 | 'page2/main': { 10 | "src": ROOT + '/src/page2/main', 11 | "tpl": "page2.html" 12 | }, 13 | 'page3/main': { 14 | "src": ROOT + '/src/page3/main', 15 | "tpl": "page3.html" 16 | }, 17 | 'page4/main': { 18 | "src": ROOT + '/src/page4/main', 19 | "tpl": "page4.php" 20 | } 21 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generate-pages", 3 | "version": "0.1.0", 4 | "description": "多页面脚手架", 5 | "author": "riskers", 6 | "bugs": { 7 | "url": "https://github.com/fe-config/generate-pages/issues" 8 | }, 9 | "license": "MIT", 10 | "homepage": "https://github.com/fe-config/generate-pages", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/fe-config/generate-pages.git" 14 | }, 15 | "keywords": ["webpack", "generate-pages"], 16 | "scripts": { 17 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --content-base pages/html --host 0.0.0.0 --port 4545 --open", 18 | "build": "cross-env CDN=http://cdn.a.com webpack" 19 | }, 20 | "devDependencies": { 21 | "babel-core": "^6.21.0", 22 | "babel-loader": "^6.2.10", 23 | "babel-plugin-add-module-exports": "^0.2.1", 24 | "babel-plugin-transform-runtime": "^6.15.0", 25 | "babel-preset-es2015": "^6.18.0", 26 | "babel-preset-stage-0": "^6.16.0", 27 | "cross-env": "^3.1.4", 28 | "css-loader": "^0.26.1", 29 | "extract-text-webpack-plugin": "^1.0.1", 30 | "html-webpack-harddisk-plugin": "^0.0.2", 31 | "html-webpack-plugin": "^2.26.0", 32 | "raw-loader": "^0.5.1", 33 | "style-loader": "^0.13.1", 34 | "webpack": "^1.14.0", 35 | "webpack-dev-server": "^1.16.2" 36 | }, 37 | "dependencies": { 38 | "jquery": "^3.1.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /pages/html/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

this is page 1

9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/html/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

this is page2

9 | 10 | -------------------------------------------------------------------------------- /pages/html/page3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page3 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /pages/html/page4.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page4 6 | 7 | 8 | 9 |

10 | 13 |

14 | 15 | 
16 | php -S 127.0.0.1:8000 ./pages/views/page4.php
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /pages/tpl/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

this is page 1

9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/tpl/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

this is page2

9 | 10 | -------------------------------------------------------------------------------- /pages/tpl/page3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page3 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /pages/tpl/page4.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page4 6 | 7 | 8 | 9 |

10 | 13 |

14 | 15 | 
16 | php -S 127.0.0.1:8000 ./pages/views/page4.php
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/common/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | color: #999; 4 | } -------------------------------------------------------------------------------- /src/common/index.js: -------------------------------------------------------------------------------- 1 | function common() { 2 | return 'this is common' 3 | } 4 | 5 | export default common -------------------------------------------------------------------------------- /src/page1/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page1.html') 3 | } 4 | 5 | import './style.css' 6 | import * as d3 from 'd3' 7 | console.log(d3) -------------------------------------------------------------------------------- /src/page1/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #999; 3 | } -------------------------------------------------------------------------------- /src/page2/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page2.html') 3 | } 4 | 5 | import 'src/common/base.css' 6 | import './style.css' 7 | import common from 'src/common' 8 | console.log(common()) -------------------------------------------------------------------------------- /src/page2/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #669; 3 | } -------------------------------------------------------------------------------- /src/page3/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page3.html') 3 | } 4 | 5 | /* 6 | 使用 ProvidePlugin 就不用 7 | import $ from 'jquery' 8 | */ 9 | $('body').append('

this is page3

') -------------------------------------------------------------------------------- /src/page4/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page4.php') 3 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); 5 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 6 | var map = require('./map') 7 | var ROOT = path.resolve(__dirname) 8 | var ENV = process.env.ENV 9 | var CDN = process.env.CDN 10 | 11 | var entry = { 12 | 'vendor': [ 13 | 'jquery' 14 | ] 15 | }, 16 | plugins = [] 17 | 18 | for (chunk in map) { 19 | entry[chunk] = map[chunk].src 20 | plugins.push(new HtmlWebpackPlugin({ 21 | alwaysWriteToDisk: true, 22 | filename: ROOT + '/pages/html/' + map[chunk].tpl, 23 | template: ROOT + '/pages/tpl/' + map[chunk].tpl, 24 | chunks: ['vendor', chunk] 25 | })) 26 | } 27 | 28 | if(ENV == 'DEV') { 29 | plugins.push(new HtmlWebpackHarddiskPlugin()) 30 | }else { 31 | plugins.push(new webpack.optimize.UglifyJsPlugin({minimize: true})) 32 | } 33 | 34 | module.exports = { 35 | devtool: ENV == 'DEV' ? 'cheap-eval-source-map' : 'source-map', 36 | entry: entry, 37 | output: { 38 | filename: '[name].js', 39 | path: path.resolve(__dirname, 'dist'), 40 | publicPath: CDN ? CDN : '/dist' 41 | }, 42 | resolve: { 43 | alias: { 44 | 'src': path.resolve(__dirname,'src'), 45 | 'pages': path.resolve(__dirname,'pages') 46 | } 47 | }, 48 | externals: { 49 | 'd3': 'window.d3' 50 | }, 51 | devServer: { 52 | proxy: { 53 | '/page4.html': { 54 | target: 'http://localhost:8000/page4.php' 55 | } 56 | } 57 | }, 58 | module: { 59 | loaders: [ 60 | { 61 | test: /\.css/, 62 | loader: ExtractTextPlugin.extract('style', 'css') 63 | }, 64 | { 65 | test: /\.js$/, 66 | loader: "babel", 67 | exclude: /node_modules/ 68 | }, 69 | { 70 | test: /(\.html|\.php)$/, 71 | loader: "raw-loader" 72 | } 73 | ] 74 | }, 75 | plugins: plugins.concat([ 76 | new webpack.DefinePlugin({ 77 | 'ENV': JSON.stringify(process.env.ENV) 78 | }), 79 | new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js'), 80 | new ExtractTextPlugin('[name].css'), 81 | new webpack.ProvidePlugin({ 82 | $: 'jquery' 83 | }) 84 | ]) 85 | } --------------------------------------------------------------------------------