Webpack v4 渐进式学习2

接上篇Webpack v4 渐进式学习,在了解webpack基础概念后,来学习它的其他组件和功能。

模块(Module)

关于模块的定义说法有很多,下面就是一种:

In modular programming, developers break programs up into discrete chunks of functionality called a module.
大意就是在模块化编程过程中,将程序分离成不相关的若干功能块,这样的每个部分就被称作是模块。

JavaScript语言对模块化的支持从ES2015开启,但历史也沉淀了很多标准方案,比如CommonJS,AMD,CMD等。

webpack做了一件事情,就是支持各类模块的引入。以下是它支持的类型:
– 使用 ES2015 import 表达式引入的模块
– CommonJS require() 表达式引入的模块
– AMD define 定义的,使用require()表达式引入的模块
– 通过 @import 导入的 css/sass/less 文件。
– 样式表中使用 (url(…)) 或者 html 使用() 引入的文件。

在webpack的迭代过程中,对以上类型的模块支持并不同,所以我们现在讨论的正式4.x版本,已经极大地抹平了各个模块的引入成本,即不需要其他额外的loader(上一节提到过loader),只用内建API直接引入模块。

扩展性方面,webpack通过loader可以引入其他语言的模块,支持的类型有:
CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus

因此,webpack并不会限制我们使用特定的技术栈来完成工作,甚至可以通过API来接入其他技术栈。参考更多loaders

module & loaders

要加载什么模块,就对应寻找适用的loader。
loader列表 提供了很多文件的预处理方案。

以babel-loader为例:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

其中rules是一组规则队列,其中每个规则匹配到的文件,将会使用匹配的loader进行预处理。

常用技巧:

module.noParse
noParse 可以定义不需要解析的模块。

// noParse: RegExp | [RegExp] | function
noParse: function(content) {
  return /jquery|lodash/.test(content);
}

更多module设置请见链接

trick & tip

“be possible out of the box” —— 开箱即用、拿来直接用的意思,一种很流行的说法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注