entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过配置 entry 属性，来指定一个（或多个）不同的入口起点。

  • 单入口（entry的值是String类型）

打包形成一个chunk。 输出一个bundle文件（output.filename）。此时chunk的名称默认是 main

  1. module.exports = {
  2.   entry: './path/to/my/entry/file.js',
  3. };
  • 多入口（Array）

所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
注意：只有在HMR功能中让html热更新生效

  1. module.exports = {
  2.   entry: ['./src/index.js', './src/add.js']
  3. };
  • 多入口（Object）

有几个入口文件就形成几个chunk，输出几个bundle文件。此时chunk的名称是 key（键名）

  1. module.exports = {
  2.   entry: {
  3.       index: './src/js/index.js',
  4.     test: './src/js/test.js'
  5.   }
  6. };
  • 特殊用法：
    1. module.exports = {
    2. entry: {
    3.   // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    4.   index: ['./src/index.js', './src/count.js'], 
    5.   // 形成一个chunk，输出一个bundle文件。
    6.   add: './src/add.js'
    7. },
    8. output: {
    9.   filename: '[name].js',
    10.   path: resolve(__dirname, 'build')
    11. },
    12. plugins: [new HtmlWebpackPlugin()],
    13. mode: 'development'
    14. };

    output

    output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
    主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。 ```javascript const path = require(‘path’);

module.exports = { entry: ‘./path/to/my/entry/file.js’, output: { path: path.resolve(__dirname, ‘dist’), filename: ‘my-first-webpack.bundle.js’, }, };

  2. - publicPath：一般用于生产环境
  3.    - 不使用时，生成的html引入js是这样的,   <script type="javascript" src="js/main.js"></script>
  4.    - publicPath: '/' ，则 <script type="javascript" src="**/**js/main.js"></script>
  5. - chunkFilename：指定非入口js文件的chunk名称（例如使用import引入的js文件，打包成单独的js文件，参考[《code split》](https://www.yuque.com/xiaoming-dgbeg/huvgwb/gngigm)代码分隔篇章）
  6. - library：整个库向外暴露的变量名
  7. - libraryTarget：
  8.    - 'window'：变量名称添加到哪个上 ===> browser浏览器
  9.    - 'global'：变量名添加到node上
  10.    - 'commonjs'
  11. ```javascript
  12. const { resolve } = require('path');
  13. const HtmlWebpackPlugin = require('html-webpack-plugin');
  15. module.exports = {
  16.   entry: './src/index.js',
  17.   output: {
  18.     // 文件名称（指定名称+目录）
  19.     filename: 'js/[name].js',
  20.     // 输出文件目录（将来所有资源输出的公共目录）
  21.     path: resolve(__dirname, 'build'),
  22.     // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
  23.     publicPath: '/',
  24.     chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
  25.     // library: '[name]', // 整个库向外暴露的变量名
  26.     // libraryTarget: 'window' // 变量名添加到哪个上 browser
  27.     // libraryTarget: 'global' // 变量名添加到哪个上 node
  28.     // libraryTarget: 'commonjs'
  29.   },
  30.   plugins: [new HtmlWebpackPlugin()],
  31.   mode: 'development'
  32. };

module

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'js/[name].js',
  8.     path: resolve(__dirname, 'build')
  9.   },
  10.   module: {
  11.     rules: [
  12.       // loader的配置
  13.       {
  14.         test: /\.css$/,
  15.         // 多个loader用use
  16.         use: ['style-loader', 'css-loader']
  17.       },
  18.       {
  19.         test: /\.js$/,
  20.         // 排除node_modules下的js文件
  21.         exclude: /node_modules/,
  22.         // 只检查 src 下的js文件
  23.         include: resolve(__dirname, 'src'),
  24.         // 优先执行
  25.         enforce: 'pre',
  26.         // 延后执行
  27.         // enforce: 'post',
  28.         // 单个loader用loader
  29.         loader: 'eslint-loader',
  30.         options: {}
  31.       },
  32.       {
  33.         // 以下配置只会生效一个
  34.         oneOf: []
  35.       }
  36.     ]
  37.   },
  38.   plugins: [new HtmlWebpackPlugin()],
  39.   mode: 'development'
  40. };

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

  1. test 属性，识别出哪些文件会被转换。
  2. use 属性，定义出在进行转换时，应该使用哪个 loader。

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下。”

  1. const path = require('path');
  3. module.exports = {
  4.   output: {
  5.     filename: 'my-first-webpack.bundle.js',
  6.   },
  7.   module: {
  8.     rules: [{ 
  9.       test: /\.txt$/, 
  10.       use: 'raw-loader' 
  11.     }],
  12.   },
  13. };

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

  1. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
  2. const webpack = require('webpack'); // 用于访问内置插件
  4. module.exports = {
  5.   module: {
  6.     rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  7.   },
  8.   plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  9. };

resolve

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   // 解析模块的规则
  6.   resolve: {
  7.     // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
  8.     alias: {
  9.       $css: resolve(__dirname, 'src/css')
  10.     },
  11.     // 配置省略文件路径的后缀名
  12.     extensions: ['.js', '.json', '.jsx', '.css'],
  13.     // 告诉 webpack 解析模块是去找哪个目录
  14.     modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  15.   }
  16. };

devServer

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

optimization

const { resolve } = require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
      // 默认值，可以不写~
      /* minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      cacheGroups: {
        // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        } 
      }*/
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true
      })
    ]
  }
};