├── .gitignore ├── 2_css ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ ├── page5 │ │ ├── style.css │ │ └── main.js │ ├── page4 │ │ ├── main.js │ │ └── style.css │ ├── page2 │ │ ├── main.js │ │ └── style.less │ └── page3 │ │ ├── main.js │ │ └── style.scss ├── pages │ ├── page1.html │ ├── page2.html │ ├── page3.html │ ├── page5.html │ └── page4.html ├── package.json └── webpack.config.js ├── 3_reload ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ └── page2 │ │ ├── style.css │ │ └── main.js ├── pages │ ├── tpl │ │ ├── page1.html │ │ └── page2.html │ └── html │ │ ├── page1.html │ │ └── page2.html ├── package.json └── webpack.config.js ├── 4_es2015 ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ └── page2 │ │ ├── style.css │ │ └── main.js ├── .babelrc ├── pages │ ├── tpl │ │ ├── page1.html │ │ └── page2.html │ └── html │ │ ├── page1.html │ │ └── page2.html ├── package.json └── webpack.config.js ├── 5_library ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ └── page2 │ │ ├── style.css │ │ └── main.js ├── .babelrc ├── pages │ ├── tpl │ │ ├── page1.html │ │ └── page2.html │ └── html │ │ ├── page1.html │ │ └── page2.html ├── package.json └── webpack.config.js ├── 6_proxy ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ └── page2 │ │ ├── style.css │ │ └── main.js ├── .babelrc ├── pages │ ├── tpl │ │ ├── page1.php │ │ └── page2.php │ └── html │ │ ├── page1.php │ │ └── page2.php ├── package.json └── webpack.config.js ├── 7_teamwork ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ ├── style.css │ │ └── main.js │ └── page2 │ │ ├── style.css │ │ └── main.js ├── .babelrc ├── .eslintrc ├── pages │ ├── tpl │ │ ├── page1.php │ │ └── page2.php │ └── html │ │ ├── page1.php │ │ └── page2.php ├── package.json └── webpack.config.js ├── 1_multi_pages ├── src │ ├── common │ │ └── index.js │ ├── page1 │ │ └── main.js │ └── page2 │ │ └── main.js ├── package.json ├── pages │ ├── page1.html │ └── page2.html └── webpack.config.js ├── README.md └── .github └── FUNDING.yml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | .vscode -------------------------------------------------------------------------------- /2_css/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /3_reload/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /4_es2015/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /5_library/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /6_proxy/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /7_teamwork/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /1_multi_pages/src/common/index.js: -------------------------------------------------------------------------------- 1 | exports.log = function(str) { 2 | console.log(str) 3 | } -------------------------------------------------------------------------------- /2_css/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /2_css/src/page5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /3_reload/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /3_reload/src/page2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | } 4 | 5 | h1 { 6 | color: #999; 7 | } -------------------------------------------------------------------------------- /4_es2015/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /4_es2015/src/page2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | } 4 | 5 | h1 { 6 | color: #999; 7 | } -------------------------------------------------------------------------------- /5_library/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /5_library/src/page2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | } 4 | 5 | h1 { 6 | color: #999; 7 | } -------------------------------------------------------------------------------- /6_proxy/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /6_proxy/src/page2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | } 4 | 5 | h1 { 6 | color: #999; 7 | } -------------------------------------------------------------------------------- /7_teamwork/src/page1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } -------------------------------------------------------------------------------- /7_teamwork/src/page2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF; 3 | } 4 | 5 | h1 { 6 | color: #999; 7 | } -------------------------------------------------------------------------------- /1_multi_pages/src/page1/main.js: -------------------------------------------------------------------------------- 1 | var log = require('../common/index.js').log 2 | 3 | log('this is page1') 4 | -------------------------------------------------------------------------------- /1_multi_pages/src/page2/main.js: -------------------------------------------------------------------------------- 1 | var log = require('../common/index.js').log 2 | 3 | log('this is page2') 4 | -------------------------------------------------------------------------------- /2_css/src/page1/main.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | 3 | var log = require('../common/index.js').log 4 | 5 | log('this is page1') 6 | -------------------------------------------------------------------------------- /2_css/src/page4/main.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | 3 | var log = require('../common/index.js').log 4 | 5 | log('this is page4') 6 | -------------------------------------------------------------------------------- /2_css/src/page5/main.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | 3 | var log = require('../common/index.js').log 4 | 5 | log('this is page5') 6 | -------------------------------------------------------------------------------- /2_css/src/page2/main.js: -------------------------------------------------------------------------------- 1 | require('./style.less') 2 | 3 | var log = require('../common/index.js').log 4 | 5 | log('this is page2') 6 | -------------------------------------------------------------------------------- /2_css/src/page3/main.js: -------------------------------------------------------------------------------- 1 | require('./style.scss') 2 | 3 | var log = require('../common/index.js').log 4 | 5 | log('this is page3') 6 | -------------------------------------------------------------------------------- /4_es2015/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | "es2015", "stage-0" 4 | ], 5 | plugins: [ 6 | "transform-runtime", 7 | "add-module-exports" 8 | ] 9 | } -------------------------------------------------------------------------------- /5_library/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | "es2015", "stage-0" 4 | ], 5 | plugins: [ 6 | "transform-runtime", 7 | "add-module-exports" 8 | ] 9 | } -------------------------------------------------------------------------------- /6_proxy/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | "es2015", "stage-0" 4 | ], 5 | plugins: [ 6 | "transform-runtime", 7 | "add-module-exports" 8 | ] 9 | } -------------------------------------------------------------------------------- /1_multi_pages/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "webpack" 4 | }, 5 | "devDependencies": { 6 | "webpack": "^1.14.0" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /7_teamwork/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | "es2015", "stage-0" 4 | ], 5 | plugins: [ 6 | "transform-runtime", 7 | "add-module-exports" 8 | ] 9 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 一份 webpack v1 的构建多页面应用的指导，具体见 https://github.com/riskers/blog/issues/27 。 2 | 3 | webpack v2 见 https://github.com/fe-config/generate-pages-tutorial/tree/v2 -------------------------------------------------------------------------------- /2_css/src/page2/style.less: -------------------------------------------------------------------------------- 1 | @bodyColor: #333; 2 | @textColor: #FFF; 3 | 4 | body { 5 | background: @bodyColor; 6 | 7 | h1 { 8 | color: @textColor; 9 | } 10 | } -------------------------------------------------------------------------------- /2_css/src/page3/style.scss: -------------------------------------------------------------------------------- 1 | $bodyColor: #333; 2 | $textColor: #FFF; 3 | 4 | body { 5 | background: $bodyColor; 6 | 7 | h1 { 8 | color: $textColor; 9 | } 10 | } -------------------------------------------------------------------------------- /4_es2015/src/page1/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page1.html') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | log('this is page1') 8 | -------------------------------------------------------------------------------- /4_es2015/src/page2/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page2.html') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | 8 | log('this is page2') 9 | -------------------------------------------------------------------------------- /3_reload/pages/tpl/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

page1

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

page2

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

page1

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

page2

9 | 10 | -------------------------------------------------------------------------------- /3_reload/src/page1/main.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | 3 | if(ENV == 'DEV') { 4 | require('pages/html/page1.html') 5 | } 6 | 7 | var log = require('../common/index.js').log 8 | 9 | log('this is page1') 10 | -------------------------------------------------------------------------------- /1_multi_pages/pages/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /1_multi_pages/pages/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /3_reload/src/page2/main.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | 3 | if(ENV == 'DEV') { 4 | require('pages/html/page2.html') 5 | } 6 | 7 | console.log(ENV) 8 | 9 | var log = require('../common/index.js').log 10 | 11 | log('this is page2') 12 | -------------------------------------------------------------------------------- /2_css/pages/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

css

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

less

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

scss

9 | 10 | 11 | -------------------------------------------------------------------------------- /2_css/src/page4/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | } 4 | 5 | h1 { 6 | color: #FFF; 7 | } 8 | 9 | .f { 10 | display: flex; 11 | justify-content: space-between; 12 | color: #FFF; 13 | } 14 | .box { 15 | flex: 1; 16 | border: 1px solid #eee; 17 | } -------------------------------------------------------------------------------- /5_library/pages/tpl/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

page1

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

page2

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /6_proxy/src/page2/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page2.php') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | 8 | log('this is page2') 9 | 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#3f3f3f') -------------------------------------------------------------------------------- /5_library/src/page2/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page2.html') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | 8 | log('this is page2') 9 | 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#3f3f3f') -------------------------------------------------------------------------------- /7_teamwork/src/page2/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page2.php') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | 8 | log('this is page2') 9 | 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#3f3f3f') -------------------------------------------------------------------------------- /7_teamwork/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "rules": { 4 | "no-console": 0 5 | }, 6 | "parserOptions": { 7 | "ecmaVersion": 6, 8 | "sourceType": "module" 9 | }, 10 | "env":{ 11 | "jquery":true, 12 | "commonjs":true, 13 | "browser":true 14 | } 15 | } -------------------------------------------------------------------------------- /2_css/pages/page5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page5 6 | 7 | 8 | 9 |

extract css

10 | 11 | 12 | -------------------------------------------------------------------------------- /6_proxy/src/page1/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page1.php') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | log('this is page1') 8 | 9 | import $ from 'jQuery' 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#FFF') 13 | -------------------------------------------------------------------------------- /4_es2015/pages/html/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

page1

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

page2

9 | 10 | -------------------------------------------------------------------------------- /5_library/src/page1/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page1.html') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | log('this is page1') 8 | 9 | import $ from 'jQuery' 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#FFF') 13 | -------------------------------------------------------------------------------- /7_teamwork/src/page1/main.js: -------------------------------------------------------------------------------- 1 | if(ENV == 'DEV') { 2 | require('pages/html/page1.php') 3 | } 4 | 5 | import './style.css' 6 | import { log } from '../common/index.js' 7 | log('this is page1') 8 | 9 | import $ from 'jQuery' 10 | $('body') 11 | .append('

this is jQuery render

') 12 | .css('color', '#FFF') 13 | -------------------------------------------------------------------------------- /1_multi_pages/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | 4 | module.exports = { 5 | entry: { 6 | 'page1/main': ROOT + '/src/page1/main', 7 | 'page2/main': ROOT + '/src/page2/main' 8 | }, 9 | output: { 10 | filename: '[name].js', 11 | path: ROOT + '/dist' 12 | } 13 | } -------------------------------------------------------------------------------- /3_reload/pages/html/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

page1

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

page2

9 | 10 | -------------------------------------------------------------------------------- /6_proxy/pages/tpl/page1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /6_proxy/pages/tpl/page2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /7_teamwork/pages/tpl/page1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /7_teamwork/pages/tpl/page2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /2_css/pages/page4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page4 6 | 7 | 8 |

postcss

9 |
10 |
1
11 |
2
12 |
3
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /5_library/pages/html/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

page1

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

page2

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2_css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "webpack" 4 | }, 5 | "devDependencies": { 6 | "autoprefixer": "^6.6.1", 7 | "css-loader": "^0.26.1", 8 | "extract-text-webpack-plugin": "^1.0.1", 9 | "less": "^2.7.2", 10 | "less-loader": "^2.2.3", 11 | "node-sass": "^4.3.0", 12 | "postcss-loader": "^1.2.2", 13 | "sass-loader": "^4.1.1", 14 | "style-loader": "^0.13.1", 15 | "webpack": "^1.14.0" 16 | }, 17 | "dependencies": {} 18 | } 19 | -------------------------------------------------------------------------------- /6_proxy/pages/html/page1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /6_proxy/pages/html/page2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /7_teamwork/pages/html/page1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page1 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /7_teamwork/pages/html/page2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page2 6 | 7 | 8 |

9 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /3_reload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --content-base pages/html --host 0.0.0.0 --port 8888", 4 | "build": "webpack" 5 | }, 6 | "devDependencies": { 7 | "cross-env": "^3.1.4", 8 | "css-loader": "^0.26.1", 9 | "extract-text-webpack-plugin": "^1.0.1", 10 | "html-webpack-harddisk-plugin": "^0.0.2", 11 | "html-webpack-plugin": "^2.26.0", 12 | "raw-loader": "^0.5.1", 13 | "style-loader": "^0.13.1", 14 | "webpack": "^1.14.0", 15 | "webpack-dev-server": "^1.16.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: https://github.com/riskers/blog/issues/24 13 | -------------------------------------------------------------------------------- /4_es2015/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --content-base pages/html --host 0.0.0.0 --port 8888", 4 | "build": "webpack" 5 | }, 6 | "devDependencies": { 7 | "babel-core": "^6.21.0", 8 | "babel-loader": "^6.2.10", 9 | "babel-plugin-add-module-exports": "^0.2.1", 10 | "babel-plugin-transform-runtime": "^6.15.0", 11 | "babel-preset-es2015": "^6.18.0", 12 | "babel-preset-stage-0": "^6.16.0", 13 | "cross-env": "^3.1.4", 14 | "css-loader": "^0.26.1", 15 | "extract-text-webpack-plugin": "^1.0.1", 16 | "html-webpack-harddisk-plugin": "^0.0.2", 17 | "html-webpack-plugin": "^2.26.0", 18 | "raw-loader": "^0.5.1", 19 | "style-loader": "^0.13.1", 20 | "webpack": "^1.14.0", 21 | "webpack-dev-server": "^1.16.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /5_library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --content-base pages/html --host 0.0.0.0 --port 8888", 4 | "build": "webpack" 5 | }, 6 | "devDependencies": { 7 | "babel-core": "^6.21.0", 8 | "babel-loader": "^6.2.10", 9 | "babel-plugin-add-module-exports": "^0.2.1", 10 | "babel-plugin-transform-runtime": "^6.15.0", 11 | "babel-preset-es2015": "^6.18.0", 12 | "babel-preset-stage-0": "^6.16.0", 13 | "cross-env": "^3.1.4", 14 | "css-loader": "^0.26.1", 15 | "extract-text-webpack-plugin": "^1.0.1", 16 | "html-webpack-harddisk-plugin": "^0.0.2", 17 | "html-webpack-plugin": "^2.26.0", 18 | "raw-loader": "^0.5.1", 19 | "style-loader": "^0.13.1", 20 | "webpack": "^1.14.0", 21 | "webpack-dev-server": "^1.16.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /6_proxy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --host 0.0.0.0 --port 8888", 4 | "build": "cross-env CDN=http://cdn.a.com webpack" 5 | }, 6 | "devDependencies": { 7 | "babel-core": "^6.21.0", 8 | "babel-loader": "^6.2.10", 9 | "babel-plugin-add-module-exports": "^0.2.1", 10 | "babel-plugin-transform-runtime": "^6.15.0", 11 | "babel-preset-es2015": "^6.18.0", 12 | "babel-preset-stage-0": "^6.16.0", 13 | "cross-env": "^3.1.4", 14 | "css-loader": "^0.26.1", 15 | "extract-text-webpack-plugin": "^1.0.1", 16 | "html-webpack-harddisk-plugin": "^0.0.2", 17 | "html-webpack-plugin": "^2.26.0", 18 | "raw-loader": "^0.5.1", 19 | "style-loader": "^0.13.1", 20 | "webpack": "^1.14.0", 21 | "webpack-dev-server": "^1.16.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /7_teamwork/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "cross-env ENV=DEV webpack-dev-server --inline --hot --quiet --progress --host 0.0.0.0 --port 8888", 4 | "lint": "eslint src", 5 | "build": "cross-env CDN=http://cdn.a.com webpack" 6 | }, 7 | "pre-commit": ["lint"], 8 | "devDependencies": { 9 | "babel-core": "^6.21.0", 10 | "babel-eslint": "^7.1.1", 11 | "babel-loader": "^6.2.10", 12 | "babel-plugin-add-module-exports": "^0.2.1", 13 | "babel-plugin-transform-runtime": "^6.15.0", 14 | "babel-preset-es2015": "^6.18.0", 15 | "babel-preset-stage-0": "^6.16.0", 16 | "cross-env": "^3.1.4", 17 | "css-loader": "^0.26.1", 18 | "eslint": "^3.13.1", 19 | "extract-text-webpack-plugin": "^1.0.1", 20 | "html-webpack-harddisk-plugin": "^0.0.2", 21 | "html-webpack-plugin": "^2.26.0", 22 | "pre-commit": "^1.2.2", 23 | "raw-loader": "^0.5.1", 24 | "style-loader": "^0.13.1", 25 | "webpack": "^1.14.0", 26 | "webpack-dev-server": "^1.16.2" 27 | }, 28 | "dependencies": {} 29 | } 30 | -------------------------------------------------------------------------------- /2_css/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var autoprefixer = require('autoprefixer') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | 7 | module.exports = { 8 | entry: { 9 | 'page1/main': ROOT + '/src/page1/main', 10 | 'page2/main': ROOT + '/src/page2/main', 11 | 'page3/main': ROOT + '/src/page3/main', 12 | 'page4/main': ROOT + '/src/page4/main', 13 | 'page5/main': ROOT + '/src/page5/main' 14 | }, 15 | output: { 16 | filename: '[name].js', 17 | path: ROOT + '/dist' 18 | }, 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.css$/, 23 | include: ROOT + '/src/page1', 24 | loaders: ['style', 'css'] 25 | }, 26 | { 27 | test: /\.less$/, 28 | loaders: ['style', 'css', 'less'] 29 | }, 30 | { 31 | test: /\.scss$/, 32 | loaders: ['style', 'css', 'sass'] 33 | }, 34 | { 35 | test: /\.css$/, 36 | include: ROOT + '/src/page4', 37 | loaders: ['style', 'css', 'postcss'] 38 | }, 39 | { 40 | test: /\.css$/, 41 | include: ROOT + '/src/page5', 42 | loader: extractCSS.extract('style', 'css') 43 | } 44 | ] 45 | }, 46 | postcss: function() { 47 | return [autoprefixer] 48 | }, 49 | plugins: [ 50 | extractCSS 51 | ] 52 | } -------------------------------------------------------------------------------- /3_reload/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var webpack = require('webpack') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 8 | 9 | module.exports = { 10 | entry: { 11 | 'page1/main': ROOT + '/src/page1/main', 12 | 'page2/main': ROOT + '/src/page2/main' 13 | }, 14 | output: { 15 | filename: '[name].js', 16 | path: ROOT + '/dist', 17 | publicPath: '/dist' 18 | }, 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.css$/, 23 | loader: extractCSS.extract('style', 'css') 24 | }, 25 | { 26 | test: /.html$/, 27 | loader: 'raw' 28 | } 29 | ] 30 | }, 31 | resolve: { 32 | alias: { 33 | pages: ROOT + '/pages' 34 | } 35 | }, 36 | plugins: [ 37 | extractCSS, 38 | new webpack.DefinePlugin({ 39 | 'ENV': JSON.stringify(process.env.ENV) 40 | }), 41 | new HtmlWebpackPlugin({ 42 | alwaysWriteToDisk: true, 43 | filename: ROOT + '/pages/html/page1.html', 44 | template: ROOT + '/pages/tpl/page1.html', 45 | chunks: ['page1/main'] 46 | }), 47 | new HtmlWebpackPlugin({ 48 | alwaysWriteToDisk: true, 49 | filename: ROOT + '/pages/html/page2.html', 50 | template: ROOT + '/pages/tpl/page2.html', 51 | chunks: ['page2/main'] 52 | }), 53 | new HtmlWebpackHarddiskPlugin(), 54 | ] 55 | } -------------------------------------------------------------------------------- /4_es2015/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var webpack = require('webpack') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 8 | 9 | module.exports = { 10 | entry: { 11 | 'page1/main': ROOT + '/src/page1/main', 12 | 'page2/main': ROOT + '/src/page2/main' 13 | }, 14 | output: { 15 | filename: '[name].js', 16 | path: ROOT + '/dist', 17 | publicPath: '/dist' 18 | }, 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.js$/, 23 | loader: "babel", 24 | exclude: /node_modules/ 25 | }, 26 | { 27 | test: /\.css$/, 28 | loader: extractCSS.extract('style', 'css') 29 | }, 30 | { 31 | test: /.html$/, 32 | loader: 'raw' 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | pages: ROOT + '/pages' 39 | } 40 | }, 41 | plugins: [ 42 | extractCSS, 43 | new webpack.DefinePlugin({ 44 | 'ENV': JSON.stringify(process.env.ENV) 45 | }), 46 | new HtmlWebpackPlugin({ 47 | alwaysWriteToDisk: true, 48 | filename: ROOT + '/pages/html/page1.html', 49 | template: ROOT + '/pages/tpl/page1.html', 50 | chunks: ['page1/main'] 51 | }), 52 | new HtmlWebpackPlugin({ 53 | alwaysWriteToDisk: true, 54 | filename: ROOT + '/pages/html/page2.html', 55 | template: ROOT + '/pages/tpl/page2.html', 56 | chunks: ['page2/main'] 57 | }), 58 | new HtmlWebpackHarddiskPlugin(), 59 | ] 60 | } -------------------------------------------------------------------------------- /5_library/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var webpack = require('webpack') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 8 | 9 | module.exports = { 10 | entry: { 11 | 'page1/main': ROOT + '/src/page1/main', 12 | 'page2/main': ROOT + '/src/page2/main' 13 | }, 14 | output: { 15 | filename: '[name].js', 16 | path: ROOT + '/dist', 17 | publicPath: '/dist' 18 | }, 19 | module: { 20 | loaders: [ 21 | { 22 | test: /\.js$/, 23 | loader: "babel", 24 | exclude: /node_modules/ 25 | }, 26 | { 27 | test: /\.css$/, 28 | loader: extractCSS.extract('style', 'css') 29 | }, 30 | { 31 | test: /.html$/, 32 | loader: 'raw' 33 | } 34 | ] 35 | }, 36 | externals: { 37 | jQuery: 'window.jQuery' 38 | }, 39 | resolve: { 40 | alias: { 41 | pages: ROOT + '/pages' 42 | } 43 | }, 44 | plugins: [ 45 | extractCSS, 46 | new webpack.DefinePlugin({ 47 | 'ENV': JSON.stringify(process.env.ENV) 48 | }), 49 | new HtmlWebpackPlugin({ 50 | alwaysWriteToDisk: true, 51 | filename: ROOT + '/pages/html/page1.html', 52 | template: ROOT + '/pages/tpl/page1.html', 53 | chunks: ['common', 'page1/main'] 54 | }), 55 | new HtmlWebpackPlugin({ 56 | alwaysWriteToDisk: true, 57 | filename: ROOT + '/pages/html/page2.html', 58 | template: ROOT + '/pages/tpl/page2.html', 59 | chunks: ['common', 'page2/main'] 60 | }), 61 | new HtmlWebpackHarddiskPlugin(), 62 | new webpack.optimize.CommonsChunkPlugin('common','common.js'), 63 | new webpack.ProvidePlugin({ 64 | $: 'jQuery' 65 | }) 66 | ] 67 | } -------------------------------------------------------------------------------- /6_proxy/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var webpack = require('webpack') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 8 | var CDN = process.env.CDN 9 | 10 | module.exports = { 11 | entry: { 12 | 'page1/main': ROOT + '/src/page1/main', 13 | 'page2/main': ROOT + '/src/page2/main' 14 | }, 15 | output: { 16 | filename: '[name].js', 17 | path: ROOT + '/dist', 18 | publicPath: CDN ? CDN : '/dist' 19 | }, 20 | devServer: { 21 | proxy: { 22 | '*': { 23 | target: 'http://localhost:8000' 24 | } 25 | } 26 | }, 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.js$/, 31 | loader: "babel", 32 | exclude: /node_modules/ 33 | }, 34 | { 35 | test: /\.css$/, 36 | loader: extractCSS.extract('style', 'css') 37 | }, 38 | { 39 | test: /.php$/, 40 | loader: 'raw' 41 | } 42 | ] 43 | }, 44 | externals: { 45 | jQuery: 'window.jQuery' 46 | }, 47 | resolve: { 48 | alias: { 49 | pages: ROOT + '/pages' 50 | } 51 | }, 52 | plugins: [ 53 | extractCSS, 54 | new webpack.DefinePlugin({ 55 | 'ENV': JSON.stringify(process.env.ENV) 56 | }), 57 | new HtmlWebpackPlugin({ 58 | alwaysWriteToDisk: true, 59 | filename: ROOT + '/pages/html/page1.php', 60 | template: ROOT + '/pages/tpl/page1.php', 61 | chunks: ['common', 'page1/main'] 62 | }), 63 | new HtmlWebpackPlugin({ 64 | alwaysWriteToDisk: true, 65 | filename: ROOT + '/pages/html/page2.php', 66 | template: ROOT + '/pages/tpl/page2.php', 67 | chunks: ['common', 'page2/main'] 68 | }), 69 | new HtmlWebpackHarddiskPlugin(), 70 | new webpack.optimize.CommonsChunkPlugin('common','common.js'), 71 | new webpack.ProvidePlugin({ 72 | $: 'jQuery' 73 | }) 74 | ] 75 | } -------------------------------------------------------------------------------- /7_teamwork/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var ROOT = path.resolve(__dirname) 3 | var webpack = require('webpack') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | var extractCSS = new ExtractTextPlugin('[name].css') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') 8 | var CDN = process.env.CDN 9 | 10 | module.exports = { 11 | entry: { 12 | 'page1/main': ROOT + '/src/page1/main', 13 | 'page2/main': ROOT + '/src/page2/main' 14 | }, 15 | output: { 16 | filename: '[name].js', 17 | path: ROOT + '/dist', 18 | publicPath: CDN ? CDN : '/dist' 19 | }, 20 | devServer: { 21 | proxy: { 22 | '*': { 23 | target: 'http://localhost:8000' 24 | } 25 | } 26 | }, 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.js$/, 31 | loader: "babel", 32 | exclude: /node_modules/ 33 | }, 34 | { 35 | test: /\.css$/, 36 | loader: extractCSS.extract('style', 'css') 37 | }, 38 | { 39 | test: /.php$/, 40 | loader: 'raw' 41 | } 42 | ] 43 | }, 44 | externals: { 45 | jQuery: 'window.jQuery' 46 | }, 47 | resolve: { 48 | alias: { 49 | pages: ROOT + '/pages' 50 | } 51 | }, 52 | plugins: [ 53 | extractCSS, 54 | new webpack.DefinePlugin({ 55 | 'ENV': JSON.stringify(process.env.ENV) 56 | }), 57 | new HtmlWebpackPlugin({ 58 | alwaysWriteToDisk: true, 59 | filename: ROOT + '/pages/html/page1.php', 60 | template: ROOT + '/pages/tpl/page1.php', 61 | chunks: ['common', 'page1/main'] 62 | }), 63 | new HtmlWebpackPlugin({ 64 | alwaysWriteToDisk: true, 65 | filename: ROOT + '/pages/html/page2.php', 66 | template: ROOT + '/pages/tpl/page2.php', 67 | chunks: ['common', 'page2/main'] 68 | }), 69 | new HtmlWebpackHarddiskPlugin(), 70 | new webpack.optimize.CommonsChunkPlugin('common','common.js'), 71 | new webpack.ProvidePlugin({ 72 | $: 'jQuery' 73 | }) 74 | ] 75 | } --------------------------------------------------------------------------------