This series of articles mainly from simple to deep introduction, such as the use of WebPack 5, Babel, SASS, PostCSS, WebapcK-chain modules, libraries to achieve the actual production project construction

🧳 directory

  • If the webpack5 build from 0 to 1 implementation JS build
  • 02. Features – Build based on the new features of WebPack 5
  • Vue React svelte, etc
  • Webpack 5 practical 04. Combination – package CLI, unified construction environment
  • Module Federation – Implementation of Module Federation based on cli

📋 structure

.├ ── Commitlint.config.js │ ├─ package.json │ ├─ Postcss.config.js │ ├─ public │ ├─ └─ ├─ ├─ ├─ ├─ ├─ └Copy the code

💻 Use command planning

  • Webpack 5 Practice repository
  • To obtaingit clone https://github.com/efoxTeam/webpack-5-practice.git
  • The installationyarn
  • debuggingyarn dev
  • buildyarn build
  • Formal environment debuggingyarn start

Code implementation

  "scripts": {
    "dev": "cross-env NODE_ENV=development DEPLOY_ENV=dev webpack serve --config ./webpack/config.js"."build": "cross-env NODE_ENV=production DEPLOY_ENV=prod webpack --config ./webpack/config.js"."start": "serve ./dist --cors -S -p 8000"
  },
Copy the code

NODE_ENV is the build environment and DEPLOY_ENV is the deployment environment. Dotenv

🛠 function

  • Webpack 5
  • Babel 7
  • PostCSS 8
  • ESlint
  • Commitlint

🤝 rely on

webpack

  • webpack
  • Webpack-cli-webpack command line
  • Webpack-dev-server – Webpack development service
  • webpack-chain– WebPack is flexibly configuredPlug-in configuration can be implemented
  • Cross-env – cross-platform environment command
  • Webpackbar – Nuxt Webpack progress display plug-in

Babel

  • Babel /core – Convert ES6+ to backward-compatible JavaScript
  • @babel/plugin-proposal-class-properties – Use properties directly on classes
  • @babel/preset-env – Intelligent environment configuration

Loaders

  • Babel-loader – uses Babel and webpack to translate JavaScript files
  • sass-loader– SCSS Translates the CSS
    • Sass – Dart version of SASS
  • postcss-loader– Use postCS to process CSS
    • Postcss-preset – ENV-postCSS-Preset is the default configuration in a compatible environment
  • css-loader– to@import 和 url()For processing
  • Style-loader – Inserts CSS into the DOM

Plugins

  • Clean -webpack-plugin – Cleans up built artifacts
  • Copy-webpack-plugin – Copies files to the production directory
  • Html-webpack-plugin – Generates HTML from templates
  • Mini-css -extract-plugin – Extracts CSS into a separate file, creates a CSS file for each JS file containing CSS, and supports on-demand loading of CSS and SourceMaps
  • css-minimizer-webpack-plugin– Compress CSS files insteadoptimize-css-assets-webpack-plugin
  • Dotenv – Webpack – Switch to different configurations for different deployment environments
  • Eslint-webpack-plugin – esLint automatically formats

🍄 new features

  • Es5 compatibility configuration
  • Experimental function

🎯 note

Webpack5 continues to sort out the relevant instructions for the following content

  • terser-webpack-pluginThe default support
  • pnp-webpack-pluginTemporary does not support
  • url-loader & file-loaderUse asset instead
  • optimization.minimizerSet mode[new custom plug-in (), '...']
  • [email protected]At present, it is still under development and its stability needs to be improved. It is not supportedliveloadtheoverlay
  • eslint-webpack-pluginreplaceeslint-loader

👋 author

  • Ken.Xu