https://github.com/lmk123/webpack-boilerplate

[DEPRECATED] Webpack with Vue.js boilerplate.
https://github.com/lmk123/webpack-boilerplate

vue webpack webpack-boilerplate

Last synced: about 2 months ago
JSON representation

[DEPRECATED] Webpack with Vue.js boilerplate.

• Host: GitHub
• URL: https://github.com/lmk123/webpack-boilerplate
• Owner: lmk123
• Archived: true
• Created: 2016-04-03T09:56:35.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-13T06:20:23.000Z (over 5 years ago)
• Last Synced: 2024-06-21T23:38:05.317Z (3 months ago)
• Topics: vue, webpack, webpack-boilerplate
• Language: JavaScript
• Homepage: https://lmk123.github.io/webpack-boilerplate/
• Size: 934 KB
• Stars: 27
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Deprecated, use [Vue CLI](https://cli.vuejs.org/) instead.**

# Webpack With Vue.js Boilerplate

This is a Webpack + Vue.js boilerplate that heavy inspired by [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) with these features:

 - Apply [Autoprefixer](https://github.com/postcss/autoprefixer) outside of `.vue` components. See [vuejs-templates/webpack#600](https://github.com/vuejs-templates/webpack/issues/600).

 - Use [webpack-dev-server](https://github.com/webpack/webpack-dev-server) instead of custom develop server.

 - [Simple config](build/config.js).

 - Not lint-on-save with ESLint: run `npm run lint` instead. This make me easy to debug code temporary.

 - Use **relative public path** by default. See [vuejs-templates/webpack#200](https://github.com/vuejs-templates/webpack/issues/200).

 - 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).

 - Apply Babel plugins with [babel-preset-env](https://github.com/babel/babel-preset-env).

 - 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).

 - 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).

 - Ready to use `import('./path/to/module')` syntax to [code-splitting](https://webpack.js.org/guides/code-splitting-import/).

...and other little improve.

## Usage

 1. Clone this template use [Git](https://git-scm.com/) or [download it](https://github.com/vuejs-templates/webpack/archive/master.zip).

 2. Install dependencies: `npm install`

Now you have three commands:

 - `npm start`

 - `npm run build`

 - `npm run lint`: Lint code with ESLint (use [JavaScript Standard Style](https://standardjs.com/) rules)

## Trouble-shooting

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:

```

npm install less-loader --save-dev

npm install stylus-loader --save-dev

```

**FOR CHINESE USER:** 如果你在安装 `node-sass` 时遇到问题，请参考这篇文章解决：[安装 node-sass 的正确姿势](https://github.com/lmk123/blog/issues/28)