webpack打包选项配置

平平淡淡的真
317 阅读3分钟

library选项

  • webpack的配置文件中的output对象中的library选项允许我们将模块导出的内容作为库暴露给外部使用
  • library用于指定库的名称，可以是字符串，字符串数组或对象
    • 如果是字符串，则导出成库被使用时，该字符串会作为全局变量暴露给浏览器环境
    • 如果是一个字符串数组，则当有多入口时，为每个入口增加全局变量
    • 如果是一个对象，则可以指定导出名称和导出方式
module.exports = {
  // …
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    library: ['MyLibrary', '[name]'], // name is a placeholder here
  },
};

<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello('webpack');
  MyLibrary.b.hello('webpack');
</script>

library.type

  • var: 将库导出为一个变量，该变量在全局作用域下可用
  • assign: 将库导出为一个变量，该变量在全局作用域下可用，但可以被其他库或模块覆盖
  • this: 将库导出为一个变量，该变量在this对象上可用
  • window: 将库导出为一个变量，该变量在window对象下可用（仅在浏览器环境下有效）
  • global: 将库导出为一个变量，该变量在global对象上可用（仅在node环境下有效）
  • commonjs: 将库导出为一个commonjs模块，该模块在node环境下可用
  • commonjs2: 将库导出为一个commonjs2模块，该模块在node环境下可用
  • amd: 将库导出为一个AMD模块，该模块在浏览器环境下可用
  • umd: 将库导出为一个umd模块，该模块可以在浏览器，node环境下可用

externals

  • externals选项用于指定哪些模块应该被视为外部模块，不应该打包到bundle中
  • externals可以是对象，字符串，正则表达式，或者函数
    • 字符串：表示要排除的模块名称
    • 正则表达式：表示要排除的模块名称与正则表达式匹配的模块
    • 函数：在函数中判断哪些模块应该排除，返回一个布尔值表示是否排除该模块
    • 对象：键表示要排除的模块名称，值表示在哪种环境下使用该模块，例如：commonjs，commonjs2，amd等

webpack-node-externals

  • webpack-node-externals是一个npm包，它可以帮助我们排除Node.js应用程序中不需要打包的第三方模块。与webpack的externals选项类似，webpack-node-externals也可以将指定的模块排除在webpack打包之外，从而减小输出的bundle体积，提高应用程序的加载速度
  • nodeExternals函数将返回一个排除所有node_modules中的模块的externals对象。这样，所有的node_modules中的模块都将被排除在webpack打包之外

mini-css-extract-plugin

  • mini-css-extract-plugin是一个webpack插件，用于将CSS样式从JavaScript代码中提取出来，并将其保存为单独的CSS文件

npmignore

  • .npmignore是一个用于指定npm包发布时忽略哪些文件或目录的文件，它类似于.gitignore文件
  • 在发布npm包时，如果没有指定.npmignore文件，npm会默认将当前目录下的所有文件都发布到npm仓库中，这样会包含很多不必要的文件或目录，增加npm包的体积和下载时间

环境区分

  • mode用于指定webpack打包模式
  • mode可以设置为none、development、production 环境区分
  • --mode 用于设置模块内的process.env.NODE_ENV（只能在模块中拿到值，在webpack配置文件中拿不到）
  • cross-env 用于设置node环境变量（跨平台，在模块，webpack配置文件中都可以拿到）
  • DefinePlugin 用来设置模块内的全局变量
avatar
文章
阅读
粉丝