├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── app.js ├── jQuery.jpg ├── package.json ├── public ├── bundle.js ├── fa2821a4a02d7734807b3de09b294d84.jpg └── index.html ├── show.png ├── src ├── components │ ├── Footer │ │ ├── Footer.html │ │ ├── index.js │ │ └── style.css │ ├── Header │ │ ├── Header.html │ │ ├── index.js │ │ └── style.css │ └── Main │ │ ├── Main.html │ │ ├── index.js │ │ └── style.css ├── lib │ └── images │ │ └── image.jpg ├── main.js ├── normalize.css ├── routes.js └── style.css └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | "no-console": 0, 13 | "no-unused-vars": 0, 14 | "indent": [ 15 | "error", 16 | 2 17 | ], 18 | "linebreak-style": [ 19 | "error", 20 | "unix" 21 | ], 22 | "quotes": [ 23 | "error", 24 | "single" 25 | ], 26 | "semi": [ 27 | "error", 28 | "always" 29 | ] 30 | } 31 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # DS_Store 40 | .DS_Store 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 不想写前端的Encounter 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-jQuery-cli 2 | 基于webpack的jQuery脚手架，快速进行移动端的jQuery页面开发。 3 | 4 | ## 技术栈 5 | 6 | * jQuery 7 | 8 | ![image](./jQuery.jpg) 9 | 10 | ## 运行效果 11 | 12 | ![image](./show.png) 13 | 14 | ## 项目结构 15 | 16 | ``` 17 | ├── .eslintrc :eslint代码检查规范 18 | ├── .gitignore 19 | ├── package.json 20 | ├── app.js :项目入口文件 21 | ├── webpack.config.js :webpack 相关配置文件 22 | ├── LICENSE :项目LICENSE 23 | ├── src 24 | │ ├── main.js :组件分发入口文件 25 | │ ├── routes.js :路由配置文件 26 | │ ├── normalize.css :css reset 27 | │ ├── style.css :全局样式文件 28 | │ ├── lib :存放静态资源文件 29 | │ │ └── images :存放 30 | │ │ └── image.jpg 31 | │ └── components :存放项目组件，集成jQuery 32 | │ ├── Header 33 | │ │ ├── Header.html 34 | │ │ ├── index.js 35 | │ │ └── style.css 36 | │ ├─── Main 37 | │ │ ├── Main.html 38 | │ │ ├── index.js 39 | │ │ └── style.css 40 | │ └─── Footer 41 | │ ├── Footer.html 42 | │ ├── index.js 43 | │ └── style.css 44 | └── public :打包后的项目代码 45 | ├── index.html 46 | └── bundle.js 47 | ``` 48 | 49 | ## 用法 50 | 51 | ### `git clone https://github.com/xingbofeng/webpack-jQuery-cli.git` 52 | 53 | 下载本项目 54 | 55 | ### `npm install` 56 | 57 | 安装依赖 58 | 59 | ### `npm start` 60 | 61 | 在开发环境运行项目，启动成功后，在浏览器打开`http://localhost:2017`可以访问。 62 | 当你修改项目中的文件并保存后，应用进程会重新加载，如果有错误会在终端显示。 63 | 64 | ### `npm run dist` 65 | 66 | 运行打包程序，将项目打包为静态资源文件。 67 | 68 | ## 代码检查 69 | 70 | 集成`eslint`代码风格检查工具，可在根目录下的[.eslintrc]查看具体配置项目。 71 | 72 | ## LICENSE 73 | [MIT](LICENSE) 74 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | import main from './src/main.js'; -------------------------------------------------------------------------------- /jQuery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xingbofeng/webpack-jQuery-cli/cdf10ab562ba95ca93a20960deb5c1e3db51ca46/jQuery.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-jQuery-cli", 3 | "version": "1.0.0", 4 | "description": "webpack-jQuery-cli", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --devtool eval --progress --colors --hot", 8 | "dist": "webpack", 9 | "test": "test" 10 | }, 11 | "author": "xingbofeng", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "autoprefixer-loader": "^3.2.0", 15 | "babel-core": "^6.23.1", 16 | "babel-loader": "^6.4.0", 17 | "babel-preset-es2015": "^6.22.0", 18 | "css-loader": "^0.26.2", 19 | "eslint": "^3.17.1", 20 | "eslint-loader": "^1.6.3", 21 | "extract-text-webpack-plugin": "^2.1.0", 22 | "file-loader": "^0.10.1", 23 | "html-loader": "^0.4.5", 24 | "html-webpack-plugin": "^2.28.0", 25 | "jquery": "^3.1.1", 26 | "json-loader": "^0.5.4", 27 | "style-loader": "^0.13.2", 28 | "uglifyjs-webpack-plugin": "^0.4.1", 29 | "url-loader": "^0.5.8", 30 | "webpack": "^2.2.1", 31 | "webpack-dev-server": "^2.4.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/fa2821a4a02d7734807b3de09b294d84.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xingbofeng/webpack-jQuery-cli/cdf10ab562ba95ca93a20960deb5c1e3db51ca46/public/fa2821a4a02d7734807b3de09b294d84.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpack-jQuery-cli 7 | 8 | 9 |
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xingbofeng/webpack-jQuery-cli/cdf10ab562ba95ca93a20960deb5c1e3db51ca46/show.png -------------------------------------------------------------------------------- /src/components/Footer/Footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './Footer.html'; 2 | import style from './style.css'; 3 | import $ from 'jquery'; 4 | 5 | export default Footer; -------------------------------------------------------------------------------- /src/components/Footer/style.css: -------------------------------------------------------------------------------- 1 | footer { 2 | font-size: 1rem; 3 | } -------------------------------------------------------------------------------- /src/components/Header/Header.html: -------------------------------------------------------------------------------- 1 |
2 |

Header

3 |
-------------------------------------------------------------------------------- /src/components/Header/index.js: -------------------------------------------------------------------------------- 1 | import Header from './Header.html'; 2 | import style from './style.css'; 3 | import $ from 'jquery'; 4 | 5 | export default Header; -------------------------------------------------------------------------------- /src/components/Header/style.css: -------------------------------------------------------------------------------- 1 | header { 2 | font-size: 1rem; 3 | } -------------------------------------------------------------------------------- /src/components/Main/Main.html: -------------------------------------------------------------------------------- 1 |
2 | Encounter 3 |
-------------------------------------------------------------------------------- /src/components/Main/index.js: -------------------------------------------------------------------------------- 1 | import Main from './Main.html'; 2 | import style from './style.css'; 3 | import $ from 'jquery'; 4 | 5 | export default Main; -------------------------------------------------------------------------------- /src/components/Main/style.css: -------------------------------------------------------------------------------- 1 | main { 2 | font-size: 0.75rem; 3 | } -------------------------------------------------------------------------------- /src/lib/images/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xingbofeng/webpack-jQuery-cli/cdf10ab562ba95ca93a20960deb5c1e3db51ca46/src/lib/images/image.jpg -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import normalize from './normalize.css'; 2 | import style from './style.css'; 3 | import $ from 'jquery'; 4 | import routes from './routes.js'; 5 | 6 | // pageWidth为设计图的宽度，一般为640px或750px 7 | const pageWidth = 640; 8 | 9 | function mapRoutesToPage(routes) { 10 | const path = window.location.pathname; 11 | let i = 0; 12 | while (i < routes.length) { 13 | if (routes[i].path === path) { 14 | return routes[i].components; 15 | } 16 | i++; 17 | } 18 | return '

404 Not Found

'; 19 | } 20 | 21 | // 进行路由匹配 22 | $(document).ready(function() { 23 | $('#container').html(mapRoutesToPage(routes)); 24 | }); 25 | (function(doc, win) { 26 | var docEl = doc.documentElement, 27 | resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize', 28 | recalc = function() { 29 | var clientWidth = docEl.clientWidth; 30 | if (!clientWidth) return; 31 | if (clientWidth >= pageWidth) { 32 | docEl.style.fontSize = '100px'; 33 | } else { 34 | docEl.style.fontSize = 100 * (clientWidth / pageWidth) + 'px'; 35 | } 36 | }; 37 | if (!doc.addEventListener) return; 38 | win.addEventListener(resizeEvt, recalc, false); 39 | doc.addEventListener('DOMContentLoaded', recalc, false); 40 | if (window.localStorage.youdaonsj) { 41 | $(window).scrollTop(parseInt(window.localStorage.youdaonsj, 10)); 42 | } 43 | var vendor = 'daxuelaile_'; 44 | 45 | function init() { 46 | bindVendors(); 47 | } 48 | 49 | var getParameter = function(name) { 50 | var r = new RegExp(`(\\?|#|&)${name}=([^&#]*)(&|#|$)`), 51 | m = location.href.match(r); 52 | return decodeURIComponent(!m ? '' : m[2]); 53 | }; 54 | 55 | //追加vendor 56 | function transferLink(link) { 57 | if (link.indexOf('vendor') === -1) { 58 | if (link.indexOf('?') === -1) { 59 | link += `?vendor=${vendor}`; 60 | } else { 61 | link += `&vendor=${vendor}`; 62 | } 63 | } 64 | return link; 65 | } 66 | 67 | 68 | function bindVendors() { 69 | vendor = getParameter('vendor'); 70 | var all = $('a'); 71 | all.each(function(inx, item) { 72 | var $a = $(item); 73 | $a.attr('href', transferLink($a.attr('href'))); 74 | }); 75 | } 76 | init(); 77 | })(document, window); 78 | 79 | window.onunload = function() { 80 | window.localStorage.youdaonsj = $(window).scrollTop(); 81 | }; -------------------------------------------------------------------------------- /src/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | /* Document 11 | ========================================================================== */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | text-decoration: none; 109 | color: #fff; 110 | } 111 | 112 | /** 113 | * Remove the outline on focused links when they are also active or hovered 114 | * in all browsers (opinionated). 115 | */ 116 | 117 | a:hover, 118 | a:visited, 119 | a:link, 120 | a:active { 121 | outline-width: 0; 122 | color: #fff; 123 | } 124 | 125 | /** 126 | * 1. Remove the bottom border in Firefox 39-. 127 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 128 | */ 129 | 130 | abbr[title] { 131 | border-bottom: none; /* 1 */ 132 | text-decoration: underline; /* 2 */ 133 | text-decoration: underline dotted; /* 2 */ 134 | } 135 | 136 | /** 137 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 138 | */ 139 | 140 | b, 141 | strong { 142 | font-weight: inherit; 143 | } 144 | 145 | /** 146 | * Add the correct font weight in Chrome, Edge, and Safari. 147 | */ 148 | 149 | b, 150 | strong { 151 | font-weight: bolder; 152 | } 153 | 154 | /** 155 | * 1. Correct the inheritance and scaling of font size in all browsers. 156 | * 2. Correct the odd `em` font sizing in all browsers. 157 | */ 158 | 159 | code, 160 | kbd, 161 | samp { 162 | font-family: monospace, monospace; /* 1 */ 163 | font-size: 1em; /* 2 */ 164 | } 165 | 166 | /** 167 | * Add the correct font style in Android 4.3-. 168 | */ 169 | 170 | dfn { 171 | font-style: italic; 172 | } 173 | 174 | /** 175 | * Add the correct background and color in IE 9-. 176 | */ 177 | 178 | mark { 179 | background-color: #ff0; 180 | color: #000; 181 | } 182 | 183 | /** 184 | * Add the correct font size in all browsers. 185 | */ 186 | 187 | small { 188 | font-size: 80%; 189 | } 190 | 191 | /** 192 | * Prevent `sub` and `sup` elements from affecting the line height in 193 | * all browsers. 194 | */ 195 | 196 | sub, 197 | sup { 198 | font-size: 75%; 199 | line-height: 0; 200 | position: relative; 201 | vertical-align: baseline; 202 | } 203 | 204 | sub { 205 | bottom: -0.25em; 206 | } 207 | 208 | sup { 209 | top: -0.5em; 210 | } 211 | 212 | /* Embedded content 213 | ========================================================================== */ 214 | 215 | /** 216 | * Add the correct display in IE 9-. 217 | */ 218 | 219 | audio, 220 | video { 221 | display: inline-block; 222 | } 223 | 224 | /** 225 | * Add the correct display in iOS 4-7. 226 | */ 227 | 228 | audio:not([controls]) { 229 | display: none; 230 | height: 0; 231 | } 232 | 233 | /** 234 | * Remove the border on images inside links in IE 10-. 235 | */ 236 | 237 | img { 238 | border-style: none; 239 | } 240 | 241 | /** 242 | * Hide the overflow in IE. 243 | */ 244 | 245 | svg:not(:root) { 246 | overflow: hidden; 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change the font styles in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | optgroup, 260 | select, 261 | textarea { 262 | font-family: sans-serif; /* 1 */ 263 | font-size: 100%; /* 1 */ 264 | line-height: 1.15; /* 1 */ 265 | margin: 0; /* 2 */ 266 | border: none; 267 | } 268 | 269 | /** 270 | * Show the overflow in IE. 271 | * 1. Show the overflow in Edge. 272 | */ 273 | 274 | button, 275 | input { /* 1 */ 276 | overflow: visible; 277 | } 278 | 279 | /** 280 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 281 | * 1. Remove the inheritance of text transform in Firefox. 282 | */ 283 | 284 | button, 285 | select { /* 1 */ 286 | text-transform: none; 287 | } 288 | 289 | /** 290 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 291 | * controls in Android 4. 292 | * 2. Correct the inability to style clickable types in iOS and Safari. 293 | */ 294 | 295 | button, 296 | html [type="button"], /* 1 */ 297 | [type="reset"], 298 | [type="submit"] { 299 | -webkit-appearance: button; /* 2 */ 300 | } 301 | 302 | /** 303 | * Remove the inner border and padding in Firefox. 304 | */ 305 | 306 | button::-moz-focus-inner, 307 | [type="button"]::-moz-focus-inner, 308 | [type="reset"]::-moz-focus-inner, 309 | [type="submit"]::-moz-focus-inner { 310 | border-style: none; 311 | padding: 0; 312 | } 313 | 314 | /** 315 | * Restore the focus styles unset by the previous rule. 316 | */ 317 | 318 | button:-moz-focusring, 319 | [type="button"]:-moz-focusring, 320 | [type="reset"]:-moz-focusring, 321 | [type="submit"]:-moz-focusring { 322 | outline: 1px dotted ButtonText; 323 | } 324 | 325 | /** 326 | * Change the border, margin, and padding in all browsers (opinionated). 327 | */ 328 | 329 | fieldset { 330 | border: 1px solid #c0c0c0; 331 | margin: 0 2px; 332 | padding: 0.35em 0.625em 0.75em; 333 | } 334 | 335 | /** 336 | * 1. Correct the text wrapping in Edge and IE. 337 | * 2. Correct the color inheritance from `fieldset` elements in IE. 338 | * 3. Remove the padding so developers are not caught out when they zero out 339 | * `fieldset` elements in all browsers. 340 | */ 341 | 342 | legend { 343 | box-sizing: border-box; /* 1 */ 344 | color: inherit; /* 2 */ 345 | display: table; /* 1 */ 346 | max-width: 100%; /* 1 */ 347 | padding: 0; /* 3 */ 348 | white-space: normal; /* 1 */ 349 | } 350 | 351 | /** 352 | * 1. Add the correct display in IE 9-. 353 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 354 | */ 355 | 356 | progress { 357 | display: inline-block; /* 1 */ 358 | vertical-align: baseline; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove the default vertical scrollbar in IE. 363 | */ 364 | 365 | textarea { 366 | overflow: auto; 367 | } 368 | 369 | /** 370 | * 1. Add the correct box sizing in IE 10-. 371 | * 2. Remove the padding in IE 10-. 372 | */ 373 | 374 | [type="checkbox"], 375 | [type="radio"] { 376 | box-sizing: border-box; /* 1 */ 377 | padding: 0; /* 2 */ 378 | } 379 | 380 | /** 381 | * Correct the cursor style of increment and decrement buttons in Chrome. 382 | */ 383 | 384 | [type="number"]::-webkit-inner-spin-button, 385 | [type="number"]::-webkit-outer-spin-button { 386 | height: auto; 387 | } 388 | 389 | /** 390 | * 1. Correct the odd appearance in Chrome and Safari. 391 | * 2. Correct the outline style in Safari. 392 | */ 393 | 394 | [type="search"] { 395 | -webkit-appearance: textfield; /* 1 */ 396 | outline-offset: -2px; /* 2 */ 397 | } 398 | 399 | /** 400 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 401 | */ 402 | 403 | [type="search"]::-webkit-search-cancel-button, 404 | [type="search"]::-webkit-search-decoration { 405 | -webkit-appearance: none; 406 | } 407 | 408 | /** 409 | * 1. Correct the inability to style clickable types in iOS and Safari. 410 | * 2. Change font properties to `inherit` in Safari. 411 | */ 412 | 413 | ::-webkit-file-upload-button { 414 | -webkit-appearance: button; /* 1 */ 415 | font: inherit; /* 2 */ 416 | } 417 | 418 | /* Interactive 419 | ========================================================================== */ 420 | 421 | /* 422 | * Add the correct display in IE 9-. 423 | * 1. Add the correct display in Edge, IE, and Firefox. 424 | */ 425 | 426 | details, /* 1 */ 427 | menu { 428 | display: block; 429 | } 430 | 431 | /* 432 | * Add the correct display in all browsers. 433 | */ 434 | 435 | summary { 436 | display: list-item; 437 | } 438 | 439 | /* Scripting 440 | ========================================================================== */ 441 | 442 | /** 443 | * Add the correct display in IE 9-. 444 | */ 445 | 446 | canvas { 447 | display: inline-block; 448 | } 449 | 450 | /** 451 | * Add the correct display in IE. 452 | */ 453 | 454 | template { 455 | display: none; 456 | } 457 | 458 | /* Hidden 459 | ========================================================================== */ 460 | 461 | /** 462 | * Add the correct display in IE 10-. 463 | */ 464 | 465 | [hidden] { 466 | display: none; 467 | } -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import Header from './components/Header/index.js'; 2 | import Main from './components/Main/index.js'; 3 | import Footer from './components/Footer/index.js'; 4 | // 匹配路由时一定要注意先后顺序，他们会是同辈元素 5 | export default [{ 6 | 'path': '/', 7 | 'components': Header + Main + Footer 8 | }, { 9 | 'path': '/Main', 10 | 'components': Main 11 | }, { 12 | 'path': '/Footer', 13 | 'components': Footer 14 | }, { 15 | 'path': '/Header', 16 | 'components': Header 17 | }]; -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | flex-flow: column nowrap; 4 | align-items: center; 5 | justify-content: space-between; 6 | height: 100vh; 7 | } 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var $ = require('jquery'); 3 | var UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 4 | 5 | module.exports = { 6 | devtool: 'eval-source-map', //配置生成Source Maps 7 | entry: __dirname + '/app.js', //已多次提及的唯一入口文件 8 | output: { 9 | path: __dirname + '/public', //打包后的文件存放的地方 10 | filename: 'bundle.js' //打包后输出文件的文件名 11 | }, 12 | module: { 13 | loaders: [{ 14 | test: /\.json$/, 15 | loader: 'json-loader' 16 | }, { 17 | test: /\.js$/, 18 | exclude: /node_modules/, 19 | loader: 'babel-loader', //在webpack的module部分的loaders里进行配置即可 20 | query: { 21 | presets: ['es2015'] 22 | } 23 | }, { 24 | test: /\.js$/, 25 | loader: "eslint-loader", 26 | exclude: /node_modules/ 27 | }, { 28 | test: /\.css$/, 29 | loader: 'style-loader!css-loader!autoprefixer-loader' //添加对样式表的处理 30 | }, { 31 | test: /\.(png|jpg)$/, 32 | loader: 'url-loader?limit=8192' 33 | }, { 34 | test: /\.html$/, 35 | loader: 'html-loader' 36 | }] 37 | }, 38 | devServer: { 39 | contentBase: './public', //本地服务器所加载的页面所在的目录 40 | port: '2017', 41 | historyApiFallback: true, //不跳转 42 | inline: true //实时刷新 43 | }, 44 | plugins: [ 45 | new webpack.BannerPlugin("Copyright By XingBofeng."), 46 | new webpack.ProvidePlugin({ 47 | $: "jquery", 48 | jQuery: "jquery", 49 | "window.jQuery": "jquery" 50 | }), 51 | new UglifyJSPlugin() 52 | ] 53 | } --------------------------------------------------------------------------------