webpack 基础(三)： 核心概念

这篇主要谈一下Webpack核心概念

Entry

entry会根据入口文件分析依赖生成依赖关系图。

webpack_entry

Ouput

告诉 Webpack 如何及在哪里分发 bundles (编译后文件)，和 Entry 一起工作。

webpack_output

Loader+Rules

loaders

Webpack 4.0 中将每一个依赖都当作一个JavaScript Module处理。所以我们需要定义一个规则，如何把一个文件当作JavaScript文件处理。Webpack处理文件依赖的时候，遇到这些文件就会去rules中寻找相对应的loader，处理后将文件加入依赖关系图。

module: {
  rules: {
    {test: /\.ts$/, use: 'ts-loader'},
    {test: /\.js$/, use: 'babel-loader'},
    {test: /\.css$/, use: 'css-loader'}
  }
}

// module: {
//   rules: [
    {
      test: regex,
      use: (Array|String|Function),
      include: RegExp[],
      exclude: RegExp[],
      issuer: (RegExp|String)[],
      enforce: "pre"|"post"
    }
//   ]
// }

• test: 一个正则表达式，指定compiler运行loader的文件格式

• use: 使用loader对象的array/string/function

• enforce: 可以是"pre"or"post"，告诉Webpack这条规则在所有其他规则前面或者后面。

• include: 一个正则表达式数组，用来指示compiler哪些文件或者文件夹被包含。complier将仅搜索提供的路径。

• exclude: 一个正则表达式数组，用来指示compiler哪些文件或者文件夹被忽略。

(链式loaders)chaining loaders

rules: [
  {
    test: /\.less$/,
    use: ['style', 'css', 'less']
  }
]
// 调用方法顺序展示
// style(css(less()))

假设我们有一个style.less文件，那么它的调用顺序就是 style.less => less-loader => css-loader => style-loader => inlineStyleBrowser.js。

当然Webpack能通过loader处理大量的文件，如下所示：

son, hson, raw, val, to-string, imports, exports, expose, script, apply, callback, ifdef-loader, source-map, sourceMappingURL,
checksum, cowsay, dsv, glsl, glsl-template, render-placement, xml, svg-react, svg-url, svg-as-symbol, symbol, base64, ng-annotate,
node, required, icons, markup-inline, block-loader, bundler-configuration, console, solc, .sol, web3, includes, combine,
regexp-replace, file, url, extract, worker, shared-worker, serviceworker, bundle, require.ensure, promise, async-module, bundle,
require.ensure, react-proxy, react-hot, image, file, url, img, base64-image, responsive, srcset, svgo, svg-sprite, symbol,
svg-fill, fill, line-art, baggage, polymer, uglify, html-minify, vue, tojson, zip-it, file, lzstring, modernizr, s3, path-replace,
react-intl, require.ensure, font-subset, w3c-manifest, web-app-manifest, manifest-scope, coffee, coffee-jsx, coffee-redux, json5,
es6, esnext, babel, regenerator, livescript, sweetjs, traceur, ts, typescript, awesome-typescript, webpack-typescript, purs, oj,
elm-webpack, miel, wisp, sibilant, ion, html, dom, riot, pug, jade-html, jade-react, virtual-jade, virtual-dom, template-html,
handlebars, handlebars-template-loader, dust, ractive, jsx, react-templates, em, ejs, ejs-html, mustache, yaml, yml,
react-markdown, front-matter, markdown, remarkable, markdown-it, markdownattrs, ng-cache, ngtemplate, hamlc, haml, jinja, nunjucks,
soy, smarty, swagger, template-string, ect, tmodjs, layout, swig, twig, mjml-, bootstrap-webpack, font-awesome-webpack,
bootstrap-sass, bootstrap, bootstrap, font-awesome, style, isomorphic-style, style-loader, css, cess, less, sass, stylus, csso,
rework, postcss, autoprefixer, namespace-css, fontgen, classnames, theo, bulma, css-to-string, css-loader, po, po2mo,
format-message, jsxlate, angular-gettext, json, angular-gettext, webpack-angular-translate, angular-gettext-extract, .pot,
gettext, preprocessor, amdi18n-loader, .json, .js, .coffee, sprockets-preloader, properties, transifex, mocha, coverjs,
istanbul-instrumenter, ibrik-instrumenter, eslint, jshint, jscs, standard, inject, transform, falafel, image-size, csslint,
coffeelint, tslint, parker, sjsp, amdcheck, manifest, gulp-rev, html-test, stylelint, stylefmt, scsslint, htmlhint, documentation,
sassdoc, performance-loader

Plugins

首先Plugin是一个带有apply属性的对象，它能允许挂载到整个编译生命周期。Webpack本身拥有丰富的内置插件。

首先来看一个插件例子：

// webpack 3.0 api
function BellOnBundlerErrorPlugin () { }

BellOnBundlerErrorPlugin.prototype.apply = function(compiler) {
  if (typeof(process) !== 'undefined') {

    // Compiler events that are emitted and handled
    compiler.plugin('done', function(stats) {
      if (stats.hasErrors()) {
        process.stderr.write('\x07');
      }
    });

    compiler.plugin('failed', function(err) {
      process.stderr.write('\x07');
    });

  }
}

module.exports = BellOnBundlerErrorPlugin;

我们需要做的就是 new 一个新的实例放到plugins里面。这样有一些基础的插件也能够被复用和修改。

下面是调用的例子：

var BellOnBundlerErrorPlugin = require(‘bell-on-error’);
var webpack = require(‘webpack’);

module.exports = {
  //...
  plugins: [
	new BellOnBundlerErrorPlugin(),

	// Just a few of the built in plugins
	new webpack.optimize.CommonsChunkPlugin(‘vendors’),
	new webpack.optimize.UglifyJsPlugin()
  ]
  //...
}

Webpack的80%都是由它自己的插件系统构成的。相较于loader知识处理文件转换成模块，plugin能做的更多。它能访问ComplierAPI，在编译期间做一些事情。

总结

• Entry: 告诉 Webpack 哪些文件需要加载到浏览器；编译输出到 output 属性中。

• Output: 告诉 Webpack 如何及在哪里分发 bundles (编译后文件)，和 Entry 一起工作。

• Loaders: 告诉Webpack如何解释和翻译文件。再将文件添加到依赖关系图之前，对每个文件进行转换。

• Plugins: 为编译过程添加更多的功能模块。又有更强大的访问ComplierAPI的能力。