Introduction to Webpack

1.1 What is Webpack

Webpack is a front-end resource builder, a static Module bundler. In webpack’s view, all the front-end resource files (JS /json/ CSS /img/less/…) Will be treated as modules. It will carry out static analysis according to module dependencies and generate corresponding static resources (bundles).

1.2 Five core concepts of Webpack

1.2.1 Entry

Entry: Indicates which file webPack starts packing as the Entry point, analyzing and building internal dependency diagrams.

1.2.2 the Output

Output: Indicates where the Output of resource bundles packaged by Webpack goes and how to name them.

1.2.3 Loader

Loader: Enables Webpack to handle non-JS files, such as style files, image files (Webpack only understands JS)

1. The Plugins

Plugins: Can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment.

1.2.5 Mode

Mode: Instructs Webpack to use the configuration of the corresponding Mode.

options describe The characteristics of
development The value of process.env.node_env in DefinePlugin is set to development. Enable NamedChunksPlugin and NamedModulesPlugin. An environment in which code debugging can run locally
production The value of process.env.node_env in DefinePlugin is set to production. Enable FlagDependencyUsagePlugin FlagIncludedChunksPlugin, ModuleConcatenationPlugin NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and TerserPlugin. An environment that optimizes code to run online

2. Initial experience of Webpack

2.1 Initial Configuration

  1. Initialize package.json: NPM init

  2. Download and install webpack :(webpack4 or later requires both global and local installation of webpack-cli)

    Global installation: CNPM I webpack webpack-cli -g

    Local installation: CNPM I webpack webpack-cli -d

2.2 Compiling and Packaging Applications

After creating SRC files such as js, you don't need to configure the webpack.config.js file and can compile the package on the command line.Copy the code

Operation instruction

Webpack SRC /js/index.js -o build/js/built. Webpack compiles packaged JS and JSON files and translates es6’s modular syntax into a syntax that browsers can recognize. Production environment directive: webpack SRC /js/index.js -o build/js/built. Js –mode=production Conclusion WebPack can compile packaged JS and JSON files. The ability to translate es6’s modular syntax into a syntax that the browser can recognize. Can compress code. Problem: cannot compile and package CSS, IMG, etc. Js basic ES6 syntax cannot be converted to es5 syntax.

Instructions:

  • Webpack. / SRC /index.js -o./build/ build.js –mode=development

    Webpack starts packing with a./ SRC /index.js entry file and outputs to./build/built

  • Production environment: webpack. / SRC /index.js -o./build/ build.js –mode=production

    Webpack starts packing with a./ SRC /index.js entry file and outputs to./build/built. Js overall packaging environment, which is production environment

Conclusion:
  1. Webpack itself can handle JS/JSON resources, not CSS/IMG and other resources
  2. The production and development environments compile the ES6 modularity into a modularity that browsers recognize, but cannot handle the basic ES6 syntax to ES5 (with loader)
  3. The production environment has one more compressed JS code than the development environment