webpack2.x Basic Properties Explained (I.)

 Webpack as a building tool as the front-end as an important part of optimization, module programming, and fragmentation packaging, we may not be unfamiliar, if there is no time to pay attention to the document, Then you may not be aware that Webpack has silently upgraded to 2.x, compared to the 1.x version, Webpack2 's document structure and code hints are very friendly. Webpack from 1.x to 2, and not as a big change, and the internal interface document form also with 1 basic no modification, then compared to the WEBPACK2 version of the main properties of Webpack to do a simple property to explain

 first webpack2.1 After the introduction of the declaration Webpack omitted, that is, no require (' webpack ') can also run normally, of course, is not very recommended, because after the use of plug-ins need to display the call Webpack object. Context: The initial path of parsing and loading, typically using the current file path without setting the default. (The official document is recommended, so it can be independent of the working environment.)How to set the context when the note is configured as a global path and is set through path. Entry: The entry of the program, we are going to process the file entry. (That is, you need to work on those files when using Webpack) entry can pass string strings, arrays, object structures, function return values (not recommended) to define portal settings separately. so in Webpack2. The official online function set entry used by the es6 arrow function = = function equivalence with the normal function ------------------------------------I'm a gorgeous split-line--------------------------------- Output:webpack The exit configuration information after the program operation. After we get the file, we take some actions ~ such as compiling, compressing, merging, and finally setting the path address of the output by outputting.  property configuration under Output: FileName: The name information for the output file. Allows for customization or placeholder via [Id]/[hash]Publicpath: Specifies the public URL of the output file. (Anyway Visigoths come over) The compile file is set when there is a src or URL present. when Webpack is compiled, if we use a path reference with SRC, such as a URL to a CSS or a path to HTML, a reference to a JavaScript tag, inside the Portal file entry, it will cause the compilation to fail. Because the path to the physical memory is different from the current path, Publicpath is usually set as an href or URL to the file, so it is not too strange to have the name arbitrarily.  chunkfilename: Used for a module that is not configured in entry, but that is loaded through import or require dependencies. It can be done without setting it, but it is randomly named for poor readability. In addition, Chunkfilename is often used to extract public modules. Chunkfilename can be formatted as [id].js/[Name].js/[Hash].js] represents the index or name of the module respectively (I use the name test has been failed, the default is to the number)Program configuration:js Write = I use the Es6 writing method here is also possible if you use the Require module but note the writing format

hotupdatechunkfilename: Custom hot Update module (Advanced Setup and hotkey Deployment) Library: The name of the package used to set the export (a later example explains) librarytarget: Setting the format of the export package (later examples)

----------------------------------------------I'm a split line------------------------------------- -------------------

Properties under Modules: noparse:regexp| [REGEXP] Set webpack in parsing, the path structure is not resolved, the format is regular, when building large projects, you can improve the efficiency  rules: [] Define the resolution rules, through configuration, the file is compiled processing.  rule: Rules can be divided into three content conditional results and nested rules  rule:{test:/\.js/enforce: ' Pre ', include:[path.resolve (__dirname, ' Js/app ')] exclude:[],loader|loaders = webpack1 Setup Loader oneof: ', Options:[],query:[],parser:{}resource: '/app/', Resoucequery:/username/,use:[]} test: Matches the file format to be processed, in regular format. (test is shorthand for resouce) enforce: The order in which the loader executes is not set to normal execution. Optional value ' Pre|post ' before | include: The directory to be processed includes exclude: Exclude files directory that is not processed, you can make the array or string regular format issuer: initiator of the condition loader: A shorthand rule.use, since it has been upgraded It is not recommended for individuals to continue using loaders: An alias for an array structure rule.use the same as oneof: when matching rules, only the first matching array options|query is used: All are rule.use shorthand (a lot of 1 of things are a bit unused) parser: Parser option Object (temporarily useless, a lot of things can go to the official website to see) resource: The condition that matches the resource, you can use regular. Examples of matching files within a resource containing apps such as App.js | Demoapp.jsresourcequery: Match the resource query criteria, matching resources? The following fields, such as App.js?usernameuse: An array structure is used as the entry path for the program parser (I'm sorry I can't get the real meaning of this English) We understand that use is used as a reference loader function in the Portal configuration bar   ha properties A little bit more we'll take a few simple examples to explain//1. Basic configuration Format parsing CSS styles using modular programming note Style-loader must be in front note: webpack The import module in ES6 is supported by default, but for let const variables and otherCompilation does not parse, because Webpack think ES6 is a number of girls, cough is a good language, so do not need to convert our default use can, so in the low-version browser needs to be converted  

GitHub code example: Https://github.com/kingnuoyan/webpack

webpack2.x Basic Properties Explained (I.)