├── src
    ├── assets
    │   ├── stylesheets
    │   │   └── global.scss
    │   ├── vue.png
    │   ├── webpack.png
    │   └── fontello
    │   │   ├── font
    │   │       ├── fontello.eot
    │   │       ├── fontello.ttf
    │   │       ├── fontello.woff
    │   │       ├── fontello.woff2
    │   │       └── fontello.svg
    │   │   └── css
    │   │       └── fontello.css
    ├── pages
    │   ├── 404.vue
    │   └── index.vue
    ├── app.vue
    ├── index.js
    ├── index.ejs
    └── router.js
├── postcss.config.js
├── static
    └── favicon.jpeg
├── .gitignore
├── .eslintrc.js
├── .babelrc
├── package.json
└── README.md


/src/assets/stylesheets/global.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | 


--------------------------------------------------------------------------------
/src/pages/404.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     404
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/assets/vue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/vue.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('autoprefixer')
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/static/favicon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/static/favicon.jpeg


--------------------------------------------------------------------------------
/src/assets/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/webpack.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
3 | .DS_Store
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | 


--------------------------------------------------------------------------------
/src/assets/fontello/font/fontello.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/fontello/font/fontello.eot


--------------------------------------------------------------------------------
/src/assets/fontello/font/fontello.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/fontello/font/fontello.ttf


--------------------------------------------------------------------------------
/src/assets/fontello/font/fontello.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/fontello/font/fontello.woff


--------------------------------------------------------------------------------
/src/assets/fontello/font/fontello.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmk123/webpack-boilerplate/HEAD/src/assets/fontello/font/fontello.woff2


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import router from './router'
 7 |   export default {
 8 |     router
 9 |   }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import 'normalize.css/normalize.css'
2 | import './assets/fontello/css/fontello.css'
3 | import './assets/stylesheets/global.scss'
4 | 
5 | import Vue from 'vue'
6 | import App from './app.vue'
7 | 
8 | document.body.appendChild(new Vue(App).$mount().$el)
9 | 


--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <link rel="icon" href="<%= webpackConfig.output.publicPath %>favicon.jpeg" type="image/jpeg">
 6 |   <title>Hello Webpack</title>
 7 | </head>
 8 | <body>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parser: 'babel-eslint',
 3 |   parserOptions: {
 4 |     ecmaVersion: 6,
 5 |     sourceType: 'module'
 6 |   },
 7 |   env: {
 8 |     browser: true,
 9 |     es6: true
10 |   },
11 |   plugins: [
12 |     'html'
13 |   ],
14 |   extends: [
15 |     'standard'
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | const router = new VueRouter({
 7 |   routes: [
 8 |     {
 9 |       path: '/',
10 |       name: '首页',
11 |       component: () => import('./pages/index.vue')
12 |     },
13 |     {
14 |       path: '*',
15 |       name: '404',
16 |       component: () => import('./pages/404.vue')
17 |     }
18 |   ]
19 | })
20 | 
21 | export default router
22 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "targets": {
 7 |           "browsers": [
 8 |             "last 2 versions"
 9 |           ]
10 |         },
11 |         "modules": false,
12 |         "loose": true,
13 |         "debug": false,
14 |         "exclude": [
15 |           "transform-async-to-generator",
16 |           "transform-regenerator",
17 |           "transform-es2015-typeof-symbol",
18 |           "transform-es2015-unicode-regex",
19 |           "transform-regenerator",
20 |           "transform-es2015-for-of"
21 |         ]
22 |       }
23 |     ]
24 |   ],
25 |   "plugins": [
26 |     "syntax-dynamic-import",
27 |     [
28 |       "transform-runtime",
29 |       {
30 |         "helpers": true,
31 |         "polyfill": false,
32 |         "regenerator": false
33 |       }
34 |     ]
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="page-index">
 3 |     <div class="images">
 4 |       <div>
 5 |         <img src="../assets/webpack.png" alt="Webpack logo">
 6 |       </div>
 7 |       <div>
 8 |         <img src="../assets/vue.png" alt="Vue.js logo">
 9 |       </div>
10 |     </div>
11 |     <h3>Hello Webpack and Vue.js</h3>
12 |     <p>
13 |       Learn more on <a href="https://github.com/lmk123/webpack-boilerplate"><span class="icon-github-circled"></span>lmk123/webpack-boilerplate</a>
14 |     </p>
15 |   </div>
16 | </template>
17 | 
18 | <style lang="scss" type="text/scss">
19 |   #page-index {
20 |     margin-top: 200px;
21 | 
22 |     img {
23 |       max-width: 100%;
24 |     }
25 | 
26 |     text-align: center;
27 | 
28 |     .images {
29 |       width: 400px;
30 |       margin: 30px auto;
31 |       display: flex;
32 |       justify-content: space-between;
33 |       align-items: center;
34 | 
35 |       > div {
36 |         flex-basis: 45%;
37 |       }
38 |     }
39 |   }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/assets/fontello/css/fontello.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'fontello';
 3 |   src: url('../font/fontello.eot?10499253');
 4 |   src: url('../font/fontello.eot?10499253#iefix') format('embedded-opentype'),
 5 |        url('../font/fontello.woff2?10499253') format('woff2'),
 6 |        url('../font/fontello.woff?10499253') format('woff'),
 7 |        url('../font/fontello.ttf?10499253') format('truetype'),
 8 |        url('../font/fontello.svg?10499253#fontello') format('svg');
 9 |   font-weight: normal;
10 |   font-style: normal;
11 | }
12 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
13 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
14 | /*
15 | @media screen and (-webkit-min-device-pixel-ratio:0) {
16 |   @font-face {
17 |     font-family: 'fontello';
18 |     src: url('../font/fontello.svg?10499253#fontello') format('svg');
19 |   }
20 | }
21 | */
22 | 
23 |  [class^="icon-"]:before, [class*=" icon-"]:before {
24 |   font-family: "fontello";
25 |   font-style: normal;
26 |   font-weight: normal;
27 |   speak: none;
28 | 
29 |   display: inline-block;
30 |   text-decoration: inherit;
31 |   width: 1em;
32 |   margin-right: .2em;
33 |   text-align: center;
34 |   /* opacity: .8; */
35 | 
36 |   /* For safety - reset parent styles, that can break glyph codes*/
37 |   font-variant: normal;
38 |   text-transform: none;
39 | 
40 |   /* fix buttons height, for twitter bootstrap */
41 |   line-height: 1em;
42 | 
43 |   /* Animation center compensation - margins should be symmetric */
44 |   /* remove if not needed */
45 |   margin-left: .2em;
46 | 
47 |   /* you can be more comfortable with increased icons size */
48 |   /* font-size: 120%; */
49 | 
50 |   /* Font smoothing. That was taken from TWBS */
51 |   -webkit-font-smoothing: antialiased;
52 |   -moz-osx-font-smoothing: grayscale;
53 | 
54 |   /* Uncomment for 3D effect */
55 |   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
56 | }
57 | 
58 | .icon-github-circled:before { content: '\f09b'; } /* '' */
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "browserslist": [
 3 |     "last 2 versions"
 4 |   ],
 5 |   "private": true,
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/lmk123/webpack-boilerplate.git"
 9 |   },
10 |   "scripts": {
11 |     "start": "webpack-dev-server --watch --config build/webpack.dev.config.js",
12 |     "build": "webpack --config build/webpack.prod.config.js",
13 |     "lint": "eslint --ignore-pattern '/dist/' '**/*.{js,vue}'"
14 |   },
15 |   "dependencies": {
16 |     "normalize.css": "^7.0.0",
17 |     "vue": "^2.5.2",
18 |     "vue-router": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.5",
22 |     "babel-core": "^6.26.0",
23 |     "babel-eslint": "^8.0.1",
24 |     "babel-loader": "^7.1.2",
25 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
26 |     "babel-plugin-transform-runtime": "^6.23.0",
27 |     "babel-preset-env": "^1.6.0",
28 |     "clean-webpack-plugin": "^0.1.17",
29 |     "copy-webpack-plugin": "^4.1.1",
30 |     "css-loader": "^0.28.7",
31 |     "eslint": "^4.9.0",
32 |     "eslint-config-standard": "^10.2.0",
33 |     "eslint-plugin-html": "^3.2.2",
34 |     "eslint-plugin-import": "^2.7.0",
35 |     "eslint-plugin-node": "^5.2.0",
36 |     "eslint-plugin-promise": "^3.6.0",
37 |     "eslint-plugin-standard": "^3.0.1",
38 |     "extract-text-webpack-plugin": "^3.0.1",
39 |     "file-loader": "^1.1.5",
40 |     "html-webpack-plugin": "^2.30.1",
41 |     "node-sass": "^4.5.3",
42 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
43 |     "postcss-loader": "^2.0.8",
44 |     "qrcode-terminal": "^0.11.0",
45 |     "sass-loader": "^6.0.6",
46 |     "style-loader": "^0.19.0",
47 |     "url-loader": "^0.6.2",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.3",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.7.1",
52 |     "webpack-dev-server": "^2.9.2",
53 |     "webpack-merge": "^4.1.0"
54 |   },
55 |   "author": "Mingkai Li <milk.lee@qq.com>",
56 |   "license": "MIT",
57 |   "bugs": {
58 |     "url": "https://github.com/lmk123/webpack-boilerplate/issues"
59 |   },
60 |   "homepage": "https://github.com/lmk123/webpack-boilerplate#readme"
61 | }
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **Deprecated, use [Vue CLI](https://cli.vuejs.org/) instead.**
 2 | 
 3 | # Webpack With Vue.js Boilerplate
 4 | 
 5 | This is a Webpack + Vue.js boilerplate that heavy inspired by [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) with these features:
 6 | 
 7 |  - Apply [Autoprefixer](https://github.com/postcss/autoprefixer) outside of `.vue` components. See [vuejs-templates/webpack#600](https://github.com/vuejs-templates/webpack/issues/600).
 8 |  - Use [webpack-dev-server](https://github.com/webpack/webpack-dev-server) instead of custom develop server.
 9 |  - [Simple config](build/config.js).
10 |  - Not lint-on-save with ESLint: run `npm run lint` instead. This make me easy to debug code temporary.
11 |  - Use **relative public path** by default. See [vuejs-templates/webpack#200](https://github.com/vuejs-templates/webpack/issues/200).
12 |  - Keep source map path comment in the CSS files after a production build. See [NMFR/optimize-css-assets-webpack-plugin#6](https://github.com/NMFR/optimize-css-assets-webpack-plugin/pull/6).
13 |  - Apply Babel plugins with [babel-preset-env](https://github.com/babel/babel-preset-env).
14 |  - Use [HashedModuleIdsPlugin](https://github.com/webpack/webpack/blob/master/lib/HashedModuleIdsPlugin.js) to keep module ids consistent. See [vuejs-templates/webpack#406](https://github.com/vuejs-templates/webpack/issues/406).
15 |  - Similar to JS, also split CSS to `vendor.css` and `main.css`. See [vuejs-templates/webpack#598](https://github.com/vuejs-templates/webpack/issues/598).
16 |  - Ready to use `import('./path/to/module')` syntax to [code-splitting](https://webpack.js.org/guides/code-splitting-import/).
17 | 
18 | ...and other little improve.
19 | 
20 | ## Usage
21 | 
22 |  1. Clone this template use [Git](https://git-scm.com/) or [download it](https://github.com/vuejs-templates/webpack/archive/master.zip).
23 |  2. Install dependencies: `npm install`
24 | 
25 | Now you have three commands:
26 | 
27 |  - `npm start`
28 |  - `npm run build`
29 |  - `npm run lint`: Lint code with ESLint (use [JavaScript Standard Style](https://standardjs.com/) rules)
30 | 
31 | ## Trouble-shooting
32 | 
33 | This boilerplate use [Sass](http://sass-lang.com/) by default so I specified `node-sass` and `sass-loader` in package.json, but if you want use [less](http://lesscss.org/) or [stylus](http://stylus-lang.com/), you need install then by yourself:
34 | 
35 | ```
36 | npm install less-loader --save-dev
37 | npm install stylus-loader --save-dev
38 | ```
39 | 
40 | **FOR CHINESE USER:** 如果你在安装 `node-sass` 时遇到问题，请参考这篇文章解决：[安装 node-sass 的正确姿势](https://github.com/lmk123/blog/issues/28)
41 | 


--------------------------------------------------------------------------------
/src/assets/fontello/font/fontello.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
 5 | <defs>
 6 | <font id="fontello" horiz-adv-x="1000" >
 7 | <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 8 | <missing-glyph horiz-adv-x="1000" />
 9 | <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
10 | 
11 | <glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
12 | 
13 | <glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
14 | 
15 | <glyph glyph-name="steam-squared" unicode="&#xf1b7;" d="M693 489q0 45-32 76t-76 32-76-32-32-76q0-45 32-76t76-32 76 32 32 76z m-340-328q0-46-33-79t-78-32q-31 0-57 17t-40 43q29-12 54-23 34-13 67 1t48 48q13 34-1 67t-48 47l-46 19q12 2 23 2 46 0 78-32t33-78z m504 457v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v86l96-39q11-51 52-85t94-33q58 0 101 39t49 96l192 141q84 0 143 59t59 142q0 84-59 142t-143 59q-82 0-141-58t-60-141l-125-180q-5 1-16 1-42 0-76-21l-166 67v261q0 66 47 113t114 48h535q67 0 114-48t47-113z m-138-130q0-56-39-95t-96-40-95 40-39 95 39 95 95 40q57 0 96-39t39-96z" horiz-adv-x="857.1" />
16 | </font>
17 | </defs>
18 | </svg>


--------------------------------------------------------------------------------