Introduction to webpack

Yangyang plum 2021-05-03 20:53:10
introduction webpack


Kaigan !


webpack Official website

One 、webpack

1.1 webpack The role of

It's explained on the official website :

  • Package all the styles
  • Package all resources
  • Package all the scripts
  • Package all the pictures
  • Package all the style sheets

What browsers can parse is js、css、 And some static resources , But in normal development, we often use less、sass、hbs( template engine ), Browsers can't pick up and recognize these things directly , You need a tool to transform them into what browsers can recognize , Now the tool most people use is -webpack.


1.2 webpack The essence of

webpack It's a modern JavaScript Static module packager for applications (module bundler). When webpack When processing an application , It recursively builds a dependency graph (dependency graph), It contains each module required by the application , All these modules are then packaged into one or more bundle.


1.3 Common packing tools on the market :

  • webpack
  • rollup: More often used for packaging js
  • parcel
  • fis( Baidu )

1.4 Four concepts

  • entrance (entry): The original file to be packaged , A single page application is usually an entry , Multi page application is generally a page corresponding to an entry
  • Output (output): Where to pack up .
  • loader: Something used to handle a particular file format , such as css-loader、babel-loader.
  • plug-in unit (plugins):loader Used to convert certain types of modules ,plugins The scope of implementation is wider , It will affect the whole webpack Packaging process .
  • Pattern : By choice development or production One of them , To set up mode Parameters .

Two 、 Create project

2.1 Installation dependency

The project name of a new project cannot be called webpack, I've met =_=

  1. In order to be able to use npm Install things , First npm i, Then all the way back

In the project package.json file

image.png

  1. npm i webpack webpack-cli -D

webpack4.0 After that, it will be installed separately webpack-cli There's more in the project 2 File

image.png

Q1: Now you can use commands directly in the console webpack xxx Did you? ?

A1: Can not be , If you want to use the command directly in the console, you need to install it globally webpack, But the input just now is -D, No -g, If you want, you can use it directly webpack Instructions , Can be in package.json in scripts Do the following configuration operations in , It will automatically go to your locally installed package node_modules Find what you want in the middle .

image.png

  1. npm run build Find out warning And reporting mistakes

image.png

warning Hint I haven't set mode,webpack Will be used by default 'production' To compile code in the same way .

'production' Online mode , Will compress code ;
'development' Understand as development mode , It doesn't compress into disgusting code , It is convenient for programmers to understand )

solve : stay build In configuration mode

image.png

An error is a reminder that I don't have... In my project /src Catalog , The project needs an entrance place .

solve : Create a new one under the project src/index.js file

image.png

2.2 entry relevant

I'm in the entrance file src/index.js Write a sentence in English console.log('123'); then npm run build

image.png

There is no previous... In the console at this time warning and error 了 image.png And there's more in the project dist/main.js file

image.png

Now there's a closed loop ( It's like the Internet ~),npm run build It will go to the entrance automatically when packing src/index.js Find content in , Put the packaged content at the exit dist/main.js in .

Above is webpack The most basic operation , But not all of them will use the default configuration in the development , Will use some slightly foreign operations on this basis .


2.3 The configuration file

Create a new one webpack.config.js, In fact, this is a node Script file for , For exposure to the outside node Configuration of ,webpack Will read this file , Packing files .

image.png

At present, this file is not available export default, Because the current webpack.config.js Not yet babel transformation , Use module.exports={}

image.png


  1. Import entry file

image.png

Q2: The entry file can only be called src/index.js Do you ?
A2: No
The name of the entry file is also arbitrarily changed , As long as we can entry The path in can be corresponded .

image.png

Q3: There can only be one entry file ?
A3: No
The following two ways of writing mean the same thing , It works the same image.png

since entry Can be configured as objects , explain entry There can be more than one .
Configured with 2 An entry file home.js and about.js,npm run build It is found that the file name of the export file is the corresponding name of the import file by default

image.png

2.4 output relevant

output To configure as an object

Mentioned above webpack.config.js yes node Configuration of , So you can use node Related modules , It's used here node The path resolution module in path.

image.png

Q4: My export file doesn't want to be called main.js do ?
A4: change output{} Configuration in
The following configuration indicates that in the current directory dist In folder output.js It's an export document

If you don't configure filename The default export file is called main.js

image.png

npm run build After the discovery dist There's really one more output.js

image.png

An error will be reported

image.png

It can be used [ ] Fill in webpack Defined references

image.png In this way, the packaged results and no configuration output{} The result is the same .

Q5: The export file in a project usually has a string of hash value (main.xxxxxxxxxxxx.js) How to do it ? A5: To configure [name].[hash].js

image.png

Q6:hash It's too long to look comfortable
A6: To configure [name].[hash:6].js, Will intercept before 6 position hash value .

image.png

Q7: Suddenly found two entrance file generated hash The value is the same ?

image.png

And if I change src/home.js Below , Do it again

image.png

Found no changes about.js Of hash The value changes with it

A7: The above hash Configuration works on the whole webpack Packaging process , Use chunkhash Different... Can be generated according to different modules hash value .

image.png

And only change home.js Pieces of , After packing, it just home.js Of hash The value changes .

image.png

webpack There are three hash
The first one is for the whole packaging process hash
The second is chunkhash, It can generate corresponding hash, More use
The third is contenthash, Use a little less , Based on content hash


2.5 Change the profile location

webpack.config.js The default is placed in the root directory , In development, we usually put scripts perhaps buuild Under the folder , At this time, you need to package.json Make configuration in , If you can't find it in the default root directory, an error will be reported .

image.png

The packaged files will be automatically placed in the scripts/dist Next

image.png

Because in the configuration file, the export folder where the package file was written is at the same level as the configuration file

image.png

The configuration file webpack.config.js You can also change your name , As long as package.json The configuration file configured in can be mapped

image.png


I'm Yang Li , A front end brick boy

Ten thousand years is too long , seize every minute , See you next time

版权声明
本文为[Yangyang plum]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503204934000q.html

  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol