webpack 模块

能在webpack工程化环境里成功导入的模块，都可以视作webpack模块。 与 Node.js 模块相比，webpack 模块 能以各种方式表达它们的依赖关系。下面是 一些示例：

  • ES2015 import 语句
  • CommonJS require() 语句
  • AMD define 和 require 语句
  • css/sass/less 文件中的 @import 语句
  • stylesheet url(…) 或者 HTML 文件中的图片链接

支持的模块类型 Webpack 天生支持如下模块类型：

  • ECMAScript 模块
  • CommonJS 模块
  • AMD 模块
  • Assets
  • WebAssembly 模块

    模块路径解析 (resolve)

    1. mode: 'development',//开发环境
    2. // 解析模块的规则
    3. resolve: {
    4. // 配置解析模块路径别名: 优点：当目录层级很复杂时，简写路径；缺点：路径不会提示
    5. alias: {
    6.   //这样配置后，引入文件就可以这样简写：import '$css/index';
    7.   $css: resolve(__dirname, 'src/css'),
    8.   "@": resolve(__dirname, 'src'),
    9. },
    10. // 配置省略文件路径的后缀名（引入时就可以不写文件后缀名了）
    11. //webpack会按照数组顺序去解析这些后缀名，对于同名的文件，webpack总是会先解析列在数组首位的后缀名的文件
    12. extensions: ['.js', '.json', '.jsx', '.css'],
    13. // 告诉 webpack 解析模块应该去找哪个目录
    14. //正常配置一个'node_modules' 为了更精确直接给绝对路径先找 找不到再找第二个'node_modules',所有配置两个
    15. modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
    16. }

    外部扩展(externals)

    5.2.1.4 externals 打包时排除包

    externals：让某些库不打包，通过 cdn 引入（webpack5.0可以设置自动引入）

    webpack.config.js

  1. externals: {
  2.   // 拒绝jQuery被打包进来(通过cdn引入，速度会快一些)
  3.   // 忽略的库名 -- npm包名（'jQuery'暴露的别名 import 引入时的）
  4.   jquery: 'jQuery'
  5. }

此时打包后JS中就没有JQ，需要在 手动在index.html 中通过 cdn 引入：

  1. <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

配置自动引入到打包后的JS中

webpack5.0

  1. //引入类型
  2. externalsType:'script',
  3. externals: {
  4.   jquery: [
  5.     'https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js',
  6.       'jQuery'
  7.   ]
  8. }

依赖图(dependency graph)

bundle 分析(bundle analysis) 工具： 官方分析工具 是一个不错的开始。还有一些其他社区支持的可选项：

  • webpack-chart: webpack stats 可交互饼图。
  • webpack-visualizer: 可视化并分析你的 bundle，检查哪些模块占用空间，哪些 可能是重复使用的。
  • webpack-bundle-analyzer：一个 plugin 和 CLI 工具，它将 bundle 内容展示为 一个便捷的、交互式、可缩放的树状图形式。
  • webpack bundle optimize helper：这个工具会分析你的 bundle，并提供可操 作的改进措施，以减少 bundle 的大小。
  • bundle-stats：生成一个 bundle 报告（bundle 大小、资源、模块），并比较不 同构建之间的结果。

我们来使用 webpack-bundle-analyzer 实现。 

  1. # 首先安装这个插件作为开发依赖
  2. # NPM
  3. npm install --save-dev webpack-bundle-analyzer
  4. # Yarn
  5. yarn add -D webpack-bundle-analyzer
  7. //配置
  8. const BundleAnalyzerPlugin = require('webpack-bundleanalyzer').BundleAnalyzerPlugin;
  9.   module.exports = {
  10.     plugins: [
  11.       // ...others
  12.       new BundleAnalyzerPlugin()
  13.     ]
  14. }
  16. //执行
  17. npx webpack server