introduce

Webpack is a front-end resource builder, a static module packer.

Front-end resource building tools

Take a look at what this front-end resource is. These front-end resources are web resources that the browser does not know, such as Sass, less, TS, including the advanced syntax in JS. In order for these resources to work properly in the browser, they must be compiled, analyzed, compressed, combined, packaged, and finally generated browser-supported code from specifications and various static files that are not recognized by the browser. Webpack is a total build tool that integrates these build tools.

Static module packer

Static modules are all kinds of resource files in the process of Web development. Webpack builds a dependency diagram based on reference relationships, and then uses this diagram to package all static modules into one or more bundles for output.

Why do we need Webpack

  1. More and more plug-in dependencies need to be compiled and transformed again before they can be used.
  2. Hot update cannot be implemented.
  3. The new syntax of javascript and CSS is not supported.
  4. The code inside the garbage resource occupies too much, the web page request loads slowly.

Webpack core configuration

Entry (entrance) :

Webpack starts at the entry point of the configuration, specifying which module to use as a starting point for building its internal dependency graph, and once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point.

// entry: String | object | array / / the string / / single entry, Module.exports = {entry: './ SRC /index.js'}; // exports = {entry: './ SRC /index.js'}; // array // multiple entry, all entry files will end up in a trunk, / / output out only a bundle files / / the name of the trunk. The default is the main js (when the output filename is not write) module. Exports = {entry: ['./src/index.js', 'test.js'] }; // add a bundle file to the trunk. Module.exports = {entry: {home: './ SRC /index.js', sub1: ['./src/sub1.js', './src/sub2.js'], } };Copy the code

The output (output) :

How does Webpack output the resulting options

Output: {/* Output file directory (a public directory for future output of all resources, CSS, static files, etc.) the destination path of all output files must be absolute (using the Path module of Node.js) */ path: Path.resolve (__dirname, "dist"), // default /* "[name].js", for multiple entry points "[chunkhash].js", for persistent caching */ filename: "[name].js", /* all resources import the publicPath prefix is generally used in the production environment, be careful to use */ publicPath: "", /* the name of the non-import file chunk. A non-import trunk or a common trunk extracted by splitChunks in Optimization supports a built-in variable */ chunkFilename that is consistent with filename: "[contenthash:10].chunk.js", /* Library */ library: {name: "[name]," / / is exposed outside the library to the variable name type: "Windows"/library/exposed}},Copy the code

conclusion

  1. Because loader has a lot of content, I will explain it separately later.
  2. Caching, mentioned above, is covered in a separate article.
  3. If there are any mistakes or inaccuracies in the article, please point them out and discuss them.