# The Basics

Official guides
webpack will dynamically bundle all dependencies (creating what's known as a dependency graph)

# webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  output: {
    // filename: 'bundle.js', 生成的叫bundle.js, index.html引用的script 在这里
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true, // 自动清理dist
    publicPath: '/', // relate to 'npm run serve' and server.js and webpack-dev-middleware
  },
  /**
   *  map your compiled code back to your original source code and
   *  in your console where the error is displayed
   */
  devtool: 'inline-source-map',
  /** 热更新 - webpack-dev-server */
  devServer: {
    static: './dist',// to serve the files from the dist directory on localhost:8080
  },
  optimization: {
    runtimeChunk: 'single',
  },
  plugins: [
    /** by default will generate its own index.html file, or replace it */
    new HtmlWebpackPlugin({
      title: "development",
    }),
  ],
  module: {
    rules: [
      {
        /**
         *  when that module is run,
         * a <style> tag with the stringified css will be inserted into
         * the <head> of your html file
         */
        test: /\.css$/i, // any file that ends with .css
        use: ["style-loader", "css-loader"],
      },
      /**
       * the img src would link to the real imgs path which being generated
       * like :
       * <img src="file:.../dist/8611f3d0f21cc750a3ba.png">
       */
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  }
};

# package.json

  "dependencies": {
    "lodash": "^4.17.21",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
# npm install --save 
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }
# npm install --save-dev
---
in package.json
 "scripts": {
    "build": "webpack"
  },
# npx webpack === npm run build , without config file, run webpack inside default
 "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    "server": "node server.js"
  }
# npx webpack --config webpack.config.js === npm run build , run base your config file
热更新：
# npm run watch 
# npm run start

# Code Splitting

代码分割 Dynamic Imports SplitChunksPlugin Prevent Duplication

# Caching

contenthash output.filename

webpack compilation can remain cached unless their content has changed

# Base

contenthash When the asset's content changes, [contenthash] will change as well
optimization.splitChunks with cacheGroups to extract third-party libraries, to a separate vendor chunk as they are less likely to change than our local source code

# vendors

vendors 用于提取所有（第三方依赖）node_modules中符合条件的模块
优化的本质就是把vendor.js拆分成几个包已加快打包速度

cacheGroups: {
 vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10 // 当一个模块同时符合多个cacheGroups时，则根据其中的priority配置项确定优先级
        }
}

# externals

we'd prefer to treat X as a peer dependency.
Meaning that the consumer should already have X installed

like: 
   externals: {
    'library/one',
    'library/two',
    // Everything that starts with "library/"
    /^library\/.+$/,
     lodash: {
     ...
     }
   },