Webpack

[rogerxu]

Webpack features

• [x] Local web server
• [x] Split Bundles
• [x] Minification
• [x] Mangling
• [x] Watch mode
• [x] Live reload
• [x] Hot Module Replacement
• [x] Linter
• [x] Test runner
• [x] CSS preprocessor
• [ ] Deployment
• [x] Assets loader

[rogerxu]

Research

ruanyf/webpack-demos: a collection of simple demos of Webpack

• [x] Webpack + npm
• [x] Webpack + yarn
• [x] Webpack + ES6 Module
• [ ] Webpack + Bootstrap
• [x] Webpack + PostCSS
• [x] Webpack + ESLint
• [x] Webpack + stylelint
• [x] Webpack + Karma - as preprocessor of Karma
• [ ] Webpack + Proxy

[rogerxu]

Webpack 4

https://webpack.js.org

Resources

A tale of Webpack 4 and how to finally configure it in the right way

How to streamline your React.js development process using Webpack 4

Webpack: A Detailed Introduction – Smashing Magazine Webpack从入门到上线 – 会编程的银猪

Optimizing front-end delivery with Webpack 4

[rogerxu]

Chunk

SurviveJS - Understanding Chunks

webpack bits: Getting the most out of the CommonsChunkPlugin()

Chunk Types

• Entry chunks - Entry chunks contain Webpack runtime.
• Normal chunks - Normal chunks don't contain Webpack runtime. For lazy loading.
• Initial chunks - Initial chunks are normal chunks that count towards initial loading time of the application. These are generated by the CommonsChunkPlugin.

Lazy Loading

Static Loading require.ensure

Dynamic Loading require.context

[rogerxu]

Testing

testing · webpack/docs Wiki

Test Runner

• Karma - In-browser test runner. It contains a web server that executes source code against test code.

package.json

{
  "scripts": {
    "test": "karma start"
  }
}

Run test

$ npm test

Testing Framework

• Jasmine - Behavior-driven framework
• QUnit
• Mocha

Usage

• Node.js CommonJS - mocha
• React - Webpack + Jest
• Angular 2 - SystemJS + Karma + Jasmine
• Vue.js - Webpack + Karma + Jasmine

[rogerxu]

Babel

[rogerxu]

CSS

Embed

Extract

[rogerxu]

Image

[rogerxu]

Font

[rogerxu]

Vue

[rogerxu]

ESLint

[rogerxu]

Dev Server

[rogerxu]

HTML Template

[rogerxu]

Hot Module Replacement

[rogerxu]

Watch

[rogerxu]

Source Map

[rogerxu]

Production Flag

[rogerxu]

Minification

[rogerxu]

Duplicated Modules

[rogerxu]

Vue.js

vuejs+ts+webpack2框架的项目实践 - 云+社区 - 腾讯云