Skip to content
A quick simple JS-oriented web app starter.
JavaScript Vue CSS HTML Shell TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config/webpack
public
scripts
src
.babelrc.js
.browserslistrc
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.js
LICENSE
package.json
readme.md
tsconfig.json
webpack.config.js
yarn.lock

readme.md

🛠️ What is this

A quick JS-oriented web app starter.
(Not fully optimized yet, but already works in our projects. 😀)

It works like vue-cli or create-react-app.
But it is build from scratch. (well basiclly... just some tool installed and their configs, 😆)
So you can also check the code and references to learn how to build your own build kit. 🖖

ONLINE DEMO of supported features


⭐️ Main Features Supported

It use the latest Webpack 4 and Babel 7 to ensure the best feature support In READY.
Includes:

  • ESNext
  • TypeScript
  • React/Vue
  • Auto Polyfill
  • src/vendor split (optimized)
  • SASS/SCSS/LESS
  • CSS Autoprefixer
  • Auto ESlint (with husky)
  • Auto Prettier (with husky)

📦 Getting Started

git clone https://github.com/seognil-lab/webpack-starter

npm install

Modify or drop the src/demo folder as your wish.

dev: npm start then open 🌐 http://localhost:8080/
prod: npm build to the dist folder 👉 ./dist/

!! MUST !!

update the name (maybe author and homepage and more) in package.json

update the LICENSE file update the readme.md update .npmrc inside the project in case you want to publish


💡 Confused Config Description

webpack

  • webpack: is a code bundler.

  • .resolve: handle import path in code, do the path transformation and autocompletion staff.

  • .module.rules: is a set of different types of file loaders,
    each type can have multiple loaders which would run in reverse order.
    such as sass-loader -> postcss-loader -> css-loader -> style-loader

  • .plugins and .optimization: are orderless, they are like hooks, and would run in certain points of a build cycle.

babel

  • babel: is a ES6 ( and dialects like TypeScipt and React ) to ES5 compilers.
    (Notice that Vue has its own compiler tools.)

  • plugins: is a set of some partial code compilers.
    every plugin will handler specific syntax of code,
    It runs in order, and order matters, e.g.
    syntax-dynamic-import -> proposal-decorators -> proposal-class-properties -> transform-runtime

  • presets is a set of packaged code compilers.
    it runs in reverse order,
    e.g. typescript -> react -> env

browserslist

  • it's a browser compatibility description used by Autoprefixer and Babel
    In this workaround it's declared in .browserslistrc

Best practice


📜 References

basic

Working with Babel 7 and Webpack
How to set up Typescript with Babel and Webpack
The 100% correct way to split your chunks with Webpack
Webpack4+Babel7 优化 70%速度

The Correct Way to Import Lodash Libraries - A Benchmark

polyfill

Babel 7 升级实践 Polyfill 方案的过去、现在和未来 动态 Polyfill 解决方案

starter

webpack-starter
webpack-simple-starter
webpack-starter-basic
babel-typescript-react-boilerplate


🕗 TODO

  • es/tslint config and autorun

  • Prettier config for autorun

  • git commit hook ( to autorun some staff )

  • commitizen

  • test(mocha)

  • more TS example

  • webpack optimization

  • webpack chunk split CDN optimization https://zhuanlan.zhihu.com/p/48461259

You can’t perform that action at this time.