[webpack] theory


Learn Webpack theory

learn from https://github.com/dykily/simple_webpack

and YouTube Build your own bundler

and from tomotoes's blog

目录
  • Learn Webpack theory
    • What is a bundler
    • Webpack
      • Concepts
        • Dependency graph
        • Entry
        • Output
        • Loaders
        • Plugins
        • Mode
        • Browser Compatibility
        • Modules
      • Assets Management
        • Loading css
        • Loading Images
        • Loading fonts
        • Global Assets
      • Output Management
        • Cleaning up the /dist folder
      • Development
        • Source map
        • Watch mode
        • Using webpack-dev-server
      • Code splitting
        • Entry Points
        • Prevent duplication
        • Dynamic imports
        • Prefetching/Preloading modules
      • Lazy Load
      • Cache
        • Output Filenames
      • Resolve
    • Tips & Extension
      • Enable ES module
      • npm-package.json-pravite
      • npm install --save-dev
      • Node.js Module
      • shimming for using polyfill!

        Further reading: tree-shaking for deleting unused code (in static structure import or export).

        Modules

        In modular programming, developers break programs up into discrete chunks of functionality called a module.

        Webpack modules (can express their dependencies in a variety of ways):

        • ES6 import
        • CommonJS require()
        • AMD define and require
        • @import inside a css/sass/less file
        • An image url in a stylesheet url(...) or HTML

        Webpack supports multiple types of languages and preprocessors, via loaders.

        Loaders describe to webpack how to process non-JS modules and include these dependencies into your bundles. See the the list of loaders or write your own.

        Modules APIs doc: https://webpack.js.org/api/module-methods/

        Assets Management

        Dynamically bundle all dependencies (assets).

        Loading css

        // index.js
        import './style.css';
        // webpack.config.js
        ...
        module: {
            rules: [
              {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
              },
            ],
          },
        ...
        
        /* style.css */
        body {
          background-color: #efadfc;
        }
        

        After build, in the bundle.js you can find code snippet like:

        eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"body {\\n  background-color: #efadfc;\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/style.css?./node_modules/css-loader/dist/cjs.js");
        

        I have no idea what is this, but that JS code dynamically generate a