1. The webpack advantage

  1. Webpack-dev-server builds local environment for hot update;
  2. Preprocessing: Packages help us process es6 Sass less TS syntax and parse it into js files that browsers can recognize.
  3. Image hash to facilitate CDN cache;
  4. Automatic handling of CSS3 attribute prefixes
  5. Single file multi-file packaging;
  6. Load on demand;
  7. Modular package import export require
  8. Compression js

2. What can I do?

  1. The syntax conversion
  • Less/SASS is converted to CSS
  • ES6 is converted to ES5
  1. HTML/CSS/JS code compression merge (packaging)
  2. Webpack provides a development environment during development
  • Automatically open the browser
  • Hot update
  • Projects are usually packaged before they go live

3. Differences between Webpack4 and Webpack3

  1. Added the mode attribute
  2. Webpackage 4 has a lot of changes for Loader, Optimize
  3. Plug-ins and optimizations
    • A. webpack4 CommonsChunkPlugin plugin delete the merger of the same file, it USES the built-in API optimization. SplitChunks and optimization runtimeChunk, This means that WebPack will generate shared code blocks for you by default.
    • B. NoEmitOnErrorPlugin discarded, the use of optimization. NoEmitOnErrors alternative, the default open the plug-in in a production environment.
    • C. ModuleConcatenationPlugin discarded, the use of optimization. ConcatnateModules substitution, the default open the plug-in in a production environment.
    • D. NamedModulesPlugin discarded, the use of optimization. NamedModules substitution, the default open the plug-in in a production environment.
    • E. uglifyjs-webpack-plugin has been upgraded to v1.0, with caching and parallelism enabled by default.
  4. Upgrade the extract-text-webpack-plugin

yarn add extract-text-webpack-plugin@next -D

4. Environment preparation

Global installation webPack Webpack – CLI

yarn global add webpack webpack-cli

–save Dependencies when running the program

Dev is installed into the devDependencies development package

npm yarn
global npm install webpack -g yarn global add webpack
Development-time dependency npm install webpack –save yarn add webpack
Dependencies at run time npm install webpack –save-dev yarn add webpack –dev

5. Initialize the project

Yarn init -y // NPM init Add package.json dependency package yarn add webpack webpack-cli --devCopy the code

Pack 6.

6.1 perform webpack

Webpack: SRC /index.js: SRC /test.js: SRC /test.js:

webpack src/test.js --output test01/test.js
Copy the code

webpack src/test.js –output test01/test.js –mode none

The file directory is as follows:

6.2 Creating an index. HTML file in the package folder

You can install http-server globally and start the service

yarn global add http-server

Perform HTTP server test01. –

http://127.0.0.1:8082/index.html