🛠️ 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.
⭐️ Main Features Supported
It use the latest
Webpack 4 and
Babel 7 to ensure the best feature support In READY.
- Auto Polyfill
- src/vendor split (optimized)
- CSS Autoprefixer
- Auto ESlint (with husky)
- Auto Prettier (with husky)
📦 Getting Started
git clone https://github.com/seognil-lab/webpack-starter
Modify or drop the
src/demo folder as your wish.
npm start then open
npm build to the dist folder
!! MUST !!
homepage and more) in
.npmrc inside the project in case you want to publish
💡 Confused Config Description
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.
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: 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,
typescript -> react -> env
- it's a browser compatibility description used by
In this workaround it's declared in
splitChunks && dynamic import
When to transpile
package: rollup, basic transpile, output esm/cjs/else
project: webpack, transpile everything for browser
- Because you can't control every third-party lib or ask maintainers to do the patch
- Compacity is one of the project's purpose, not packages'
- And it's impossible to cover every use case by a packages as open libs themself
check fields in the package.json then call loader or not
es/tslint config and autorun
Prettier config for autorun
git commit hook ( to autorun some staff )
more TS example
webpack chunk split CDN optimization https://zhuanlan.zhihu.com/p/48461259