Packaging overview

Webpack, as a modular packaging tool, can not only realize modular packaging problems, but also solve compatibility problems and packaging and compiling problems of different types of files (such as CSS, images and HTML, etc.) through the Loader mechanism during the packaging process. In addition, it also has the ability of code splitting. Package all the modules in your application as needed, so you don’t have to worry about all the code packaged together, resulting in a single file too large, resulting in slow loading.

Webpack packs the modules that must be used for the initial application loading together, and the other modules are separately packaged. Then which module is actually needed in the subsequent application running process asynchronously loads the corresponding package, realizing incremental loading (progressive loading).

The installation

Webpack itself is a tool module for NPM, so you can use NPM to install webPack-related packages

npm init --yes// Initialize a package.json file to manage the dependency package version NPM I webpack webpack-cli --save-dev
Copy the code

Webpack is the core module of Webpack. Webpack-cli is a CLI program of Webpack, which is used to invoke Webpack on the cli. The cli programs provided by webpack-CLI are stored in node_modules/

By default, the package entry is SRC /index.js, and the packaged files are placed in dist/main.js.

Configuration webpack

Add webpack.config.js to the project root directory. This js is running in node. js, so you need require exports to import and export modules. Here are four important Webpack concepts to understand through Webpack configuration:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Install the plugin through NPM
const webpack = require('webpack'); // Access the built-in plug-in
const path = require('path')

module.exports = {
	entry: './src/main.js'.// Concept 1: entry. Project package entry file where './ 'cannot be saved
	output: { // Concept 2: Export.
		filename: 'bundle.js'.// The name of the output file
		path: path.join(__dirname, 'output') // The path to the output file, that is, where to put the packaged file. __dirname is the built-in module of Node.js
	},
        module: {rules: [{test: /\.css$/, use: 'css-loader' },
              { test: /\.ts$/, use: 'ts-loader'}]// loader loads and compiles non-JS files
        }
        plugins: [
            new webpack.optimize.UglifyJsPlugin(),
            new HtmlWebpackPlugin({template: './src/index.html'})]// Enhance automated build capabilities
}
Copy the code

Webpack working mode

  • productionIn this mode, the built-in optimization plug-in is started to automatically optimize the packaging result, but the packaging speed is slow. The default packaging mode is used
  • developmentIn this mode, the packaging speed is automatically optimized and some auxiliary plug-ins are added during debugging for better debugging errors
  • noneIn the mode, the most original packaging is carried out without any additional processing, which is generally needed to analyze the packaging results of our module

How to change the packaging mode: pass in the CLI –mode parameter, or configure the mode property in webpack.config.js

Analyze bundle.js and understand Webpack packaging (None mode)

// packaged as an immediate function
(function(modules){ // modules represents all modules that need to be packaged in the project
	var installedModules = {} // Cache loaded modules to improve packaging efficiency
	function __webpack_require__(moduleId){} // The function used to load the specified module
	// Mount some additional data and utility functions
	__webpack_require__.m = modules // Expose the module
	__webpack_require__.c = installedModules // Expose the module cache
	__webpack_require__.d = function(exports, name, getters){} // Define how to get the exit
	__webpack_require__.r = function(exports/ / definition__esModuleGo to the exit......return __webpack_require__(__webpack_require__.s = 0// Start loading the entry file in the source code and return to the exit, moduleid0}) ([(function(module, __webpack_exports__, __webpack_require__){}), // A function corresponds to a module
	(function(module, __webpack_exports__, __webpack_require__){
 })
])
Copy the code

To see how it works, you need to break bundle.js in the browser and see what it does.