Webpack is a static module bundler that builds a dependency graph of all modules in a project and generates one or more bundles. The document discusses Webpack configuration including entry points, output, loaders, plugins, and mode. It also provides a link to a GitHub repository with a sample Webpack configuration file and references the official Webpack documentation.

1. Webpack
2020.06.25 by Jayden

2. SECTION 1:
Introduction to Webpack

3. What is Webpack?
Webpack is a static module bundler for modern JavaScript applications. When webpack
processes your application, it internally builds a dependency graph which maps every
module your project needs and generates one or more bundles.

4. Dependency Graph
• Webpack dependency Dependency Graph
• Entry points dependency Dependency Graph
• Dependency Graph
• Webpack Analyzer
class101 web dependency graphclass101 web webpack-stats data

5. SECTION 2:
Introduction to Webpack configuration

6. Entry
• Entry points dependency graph
• entry "./src/index.js" ,
"webpack.config.js" entry
Multiple Entry Points
Single Entry Points

7. Output
• output
• output main output file
"./dist/main.js" ,
"./dist"

8. Loaders
• webpack Javascript, JSON
loader
• loader webpack
dependency graph

9. Plugins
• loader
, plugin , asset ,
•
, "new"

10. Mode
• mode webpack mode
built-in
• mode "development", "production",
"none" ,
`production`
webpack built-in optimizations

11. SECTION 3:
Class101 Web webpack.config.js

12. https://github.com/john015/webpack-demo

13. Q&A

14. Reference
• https://webpack.js.org/concepts/
• https://webpack.js.org/plugins/