所需积分/C币:26 2019-05-21 13:35:11 2.35MB PDF
收藏 收藏

Webpack是如何工作的,50 Webpack - The Why and the How Don't let yourself get confused by all the fancy stuff Webpack does. What is Webpack then? Well its a module bundler, there we go. Just kidding, this doesn't tell the beginner very much at all. I believe that the why is important to getting webpack so the bulk of this answer will focus on that. At its core Webpack allows us to use javascript modules within our browser by taking multiple files and assets and combining them into one big file as shown below in this image from the new docs for Webpack 2. Overview of Webpack All the extra shiny things such as transpiling es6/7 to es5 or allowing us to use css modules are just nice extras afforded to us by Webpack. The powerful ecosystem of Webpack plugins and extras makes Webpack seem confusing as it appears to do so much. While the additional features afforded to us through plugins is great we need to stay focused on the core reason Webpack exists - module bundling. Therefore loaders and plugins are outside the scope of this high level discussion on the fundamental problem that Webpack helps solve. Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file. This big file can then be sent by the server to a client's browser. Remember the browser and server don't care that this big file was generated using Webpack it just treats it like any other file.
Agenda Walkthroughlwebpack You should get a rough understanding of the implementation of webpack You should know where to look into when customizing. We will not go into details of individual optimization algorithms Some unimportant details are omitted for simplicity Some points for customization are highlighted Customization You will learn how to write plugins for webpack We wont list every possible customizable thing Plugins OO W class( MyPlugin)t V∪n apply ( compiler) compiler. plugin(“done,〔 stats)=>{ console. log(stats. toString) plugins: new MyPlugin( ] Osage Access to nested objects Hook Os,ect class Myplugin t app ly (compiler)t compiler plugin(("compilation 2, (compilation 2> i compilation. pLugin("optimize-modules", modules = i modules. forEach( Hooks There are different kind of hooks sync async(with( callback) argument) sequential parallel waterfall (passing result to next plugin) Check details in code(not all hooks are documented Don't forget to call the callback Elsewise process will exit unexpectedly Walkthrough webpack webpack is very object-orientated Design is probably not perfect We start our walkthrough from top down to bottom Start: Invoking the CLl: Webpack entry. js bundle. js Command line interface Get arguments from command line -pm y agj Read webpack config. js Invoke exported value if it's a function Convert command line arguments into configuration Call the webpack API with the configuration bin/webpack. js, bin/convert-argv js Can t be customized API/webpack facade Validates configuration according to schema Applies the node. js environment plugins Input/Output/Watch File System for node js Calls/ WebpackOptionsApply to process configuration Creates the Compiler May call run or watch on the compiler Exports all public plugins to use them in the configuration Webpackoptions Apply Converts all configuration options into plugins Applies default plugins Examples: output. library LibraryTemplatePlugin externals Externalsplugin devtool Eva l Dev Too l Moduleplugin SourceMapDev too l plugin AMDPlugin CommonJsplugin Remove Empty Chunksplugin MergeDupli cate ChunksPlugin

试读 26P how-webpack-works.pdf
立即下载 身份认证后 购VIP低至7折
关注 私信
how-webpack-works.pdf 26积分/C币 立即下载

试读结束, 可继续读2页

26积分/C币 立即下载