Directory Structure: launcher

launcher
|
|———— commands
|     |———— build-dll.js
|     |———— check-ver.js
|     |———— clean-build.js
|     |____ clean-dll.js
|
|———— config
|     |———— design.js
|     |———— dir-vars.js
|     |____ env.js
|
|———— webpack-analyse
|     |———— index.js
|     |____ stats.json
|
|———— webpack-base
|     |———— alias.js
|     |———— index.js
|     |———— loaders.js
|     |———— plugins.js
|     |____ stats.js
|
|———— webpack-dev
|     |———— base.js
|     |———— dll-config.js
|     |———— hot-client.js
|     |———— index.js
|     |____ server.js
|
|———— webpack-dll
|     |———— dev-manifest.json
|     |———— entry.js
|     |———— index.js
|     |———— prod-manifest.json
|     |———— reference.js
|     |———— release.json
|     |———— vendor.bundle.js
|     |____ vendor.bundle.min.js
|
|____ webpack-prod
      |———— base.js
      |———— dll-config.js
      |———— extract-css.js
      |____ index.js

The directory launcher is a very important configuration direcotry which contains:

• the webpack configuration in different environments

• the configuration of environment

• the node commands

• the configuration of directory structure

commands

The directory contains those commands:

• build-dll: the command will create vendor files by webpack.DllPlugin and webpack.DllReferencePlugin . It will excute and compile the configuration of webpack dll. More importantly, it can cache the vendor files next time if the dll config hasn't change, which can reduce the time spent by webpack compile

• check-ver: check the version of node&npm before run other commands. It's necessary for the team. these versions are defined in package.json->engines , you can modify it manually

• clean-build: clear all files in build directory. It's necessary to avoid the accumulation of files

• clean-dll: clear all files created by command: build-dll

config

The directory contains some configuration files. It contains:

• design.js: the configuration of postcss-next custom properties feature. It will be configured in .postcssrc.js, more detail please click https://github.com/postcss/postcss
• dir-vars.js: the configuration of directory structure. The file is mainly used to generate webpack alias and used by module path as parameters
• env.js: the switch or configuration which role in the different environment of the webpack

webpack-analyse

The directory contains the configuration of command: yarn run analyse. It will start server with the 3001 port number and open your default browser.

The configuration is almost the same with webpack production configuration, but webpack analyse uses webpack-bundle-analyzer which can help you realize what the composition of the bundle file.

It contains these files:

• index.js: the webpack analyse config file
• stats.json: the json file created by analyzer which can be used in http://webpack.github.io/analyse/

webpack-base

The directory contains the common configuration about webpack, which can be used in the different environment of the webpack. e.g. webpack-dev

It contains below files:

• alias.js: the setting of webpack alias
• index.js: webpack basic configuration, which can be merged by webpack-dev or webpack-prod, etc
• loaders.js: basic configuration about webpack loaders
• plugins.js: basic configuration about webpack plugins
• stats.js: common setting of webpack stats

webpack-dev

The directory contains the configuration of webpack in development environment. It contains:

• base.js: common configuration which can be used by webpack and webpack dll in development environment
• dll-config.js: webpack dll configuration in development envrionment
• hot-client.js: the setting of webpack hmr
• index.js: webpack configuration in development environment
• server.js: it will compile webpack config, start server by express and open the default browser with 3000 port number

webpack-dll

The directory contains the basic configuration of webpack dll. It contains:

• dev-mainfest.json: the json file created by webpack.DllPlugin in development environment
• entry.js: the setting of webpack entry about vendor files
• index.js: the basic configuration of webpack dll
• prod-mainfest.json: the json file created by webpack.DllPlugin in production environment
• reference.js: the configuration of webpack.DllReferencePlugin. In addition, it will use add-asset-html-webpack-plugin to add vendor file with hash to the html generated by html-webpack-plugin
• release.json: the json file created by command: build-dll to check whether it's necessary to compile webpack dll configuration by compraing the hash values about webpack configuration are the same, which created by module object-hash. If same, it will skip recompile webpack dll configuration.
• vendor.bundle: the vendor files created by webpack dll

webpack-prod

The directory contains the configuration of webpack in production environment. It contains:

• base.js: common configuration which can be used by webpack and webpack dll in production environment
• dll-config.js: webpack dll configuration in production environment
• extract-css.js: the configuration of css-loader use with extract-text-webpack-plugin
• index.js: webpack configuration in production environment