webpack打包理解

webpack打包理解（将所有依赖文件打包到一个文件中）

由于前端代码变得越来越多，越来越复杂， 纯粹脚本化的代码书写方式已经不能满足工程化得需求。

前端模块被抽象出来， 不仅仅包括js模块， 其它如css都算作一个模块。

将这些模块打包到同一个js文件中，就叫webpack打包。

打包原理

https://www.jianshu.com/p/e24ed38d89fd

webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的代码。至于你的代码使用的是commonjs还是amd或者es6的import。webpack都会对其进行分析。来获取代码的依赖。webpack做的就是分析代码。转换代码，编译代码，输出代码。

如下，会将 a和b打包到bundle.js文件中，因为a依赖b， a是入库文件。

// webpack.config.js
module.exports = {
  entry:'./a.js',
  output:{
    filename:'bundle.js'
  }
};

// a.js
var b = require('./b.js');

console.log('a');

b.b1();

// b.js
exports.b1 = function () {
  console.log('b1')
};

exports.b2 = function () {
  console.log('b2')
};

https://cnodejs.org/topic/5867bb575eac96bb04d3e301

打包中的文件管理

重点来了: webpack是如何进行资源的打包的呢？

总结:

• 每个文件都是一个资源，可以用require导入js
• 每个入口文件会把自己所依赖(即require)的资源全部打包在一起，一个资源多次引用的话，只会打包一份
• 对于多个入口的情况，其实就是分别独立的执行单个入口情况，每个入口文件不相干(可用CommonsChunkPlugin优化)

变量作为依赖模块情况

https://stackoverflow.com/questions/37241662/using-require-with-a-variable-vs-using-a-string-in-webpack

let appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require(appleIcon.href);
  return appleIcon;
});

Inside of the loop I want to require the image but it throws an error ".*$:11 Uncaught Error: Cannot find module".

从第一部分， 打包原理我们知道， webpack是对代码做静态解析， 并不去运行代码， 只做语法解析。

如果 require的参数一个常量字符串， 则可以明确定位依赖模块。 例如 require("b.js")

但是在代码逻辑组织上， 往往会出现require的参数为变量的情况，如上面那个情况。

对于这种情况webpack有自己的打包规则， 以保证打包后的代码， 满足运行代码依赖需求。

解法

https://segmentfault.com/a/1190000015648036

于是我查看了官方文档，发现有一个黄条提示。

emmm，看来问题出在这里了。

这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。

此时，webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：

import('./app'+path+'/util') => /^\.\/app.*\/util$/

也就是说，import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。

因此，如果我们直接传入一个变量，webpack就会把 (整个电脑的包都打包进来[不闹]) 认为你在逗他，并且抛出一个WARNING: Critical dependency: the request of a dependency is an expression。

所以import的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。

如我们要引用一堆页面组件，可以使用import('./pages/'+ComponentName)，这样就可以实现引用的封装，同时也避免打包多余的内容。

官方说明

https://webpack.js.org/guides/dependency-management/#require-context

require with expression

A context is created if your request contains expressions, so the exact module is not known on compile time.

Example:

require('./template/' + name + '.ejs');

webpack parses the require() call and extracts some information:

Directory: ./template
Regular expression: /^.*\.ejs$/

context module

A context module is generated. It contains references to all modules in that directory that can be required with a request matching the regular expression. The context module contains a map which translates requests to module ids.

Example:

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/folder.ejs": 44
}

The context module also contains some runtime logic to access the map.

This means dynamic requires are supported but will cause all possible modules to be included in the bundle.