初识webpack——webpack四个基础概念

前面的话

　　webpack是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。当webpack处理应用程序时，它会递归地构建一个依赖关系图表(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成少许的bundle(一般只有一个)，由浏览器加载。它是高度可配置的，在开始前须要先理解四个核心概念：入口(entry)、输出(output)、加载器(loader)、插件(plugins)。本文将详细介绍webpack的这四个基础概念

 

入口

　　webpack将建立全部应用程序的依赖关系图表。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。能够将应用程序的入口起点认为是根上下文或 app 第一个启动文件

　　类比于requirejs中的入口文件main.js，最终使用r.js打包时，都打包在main.js里

　　在webpack中，使用webpack配置对象中的entry属性来定义入口，包括如下多种方式

【单个入口（简写）语法】

　　用法：entry: string|Array<string>

　　[注意]在设置entry属性时，若是是当前页面，必定要在属性值前面设置为'./'，不然没法识别

//webpack.config.js
var config = {
  entry: './path/to/my/entry/file.js'
};

　　entry属性的单个入口语法，是下面的简写：

//webpack.config.js
var config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

　　向entry传入一个数组时，将建立“多个主入口(multi-main entry)”

entry:['./entry1','./entry2']

【对象语法】

　　用法：entry: {[entryChunkName: string]: string|Array<string>}

//webpack.config.js
var config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

　　对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式

　　从上面的代码可知，webpack从app.js和vendors.js开始建立依赖图表。这些图表是彼此彻底分离、互相独立的。这种方式比较常见于，只有一个入口起点(不包括vendor)的单页应用程序(single page application)中

 

出口

　　将全部的资源(assets)归拢在一块儿后，还须要告诉webpack在哪里打包应用程序。webpack的output属性描述了如何处理归拢在一块儿的代码(bundled code)

//webpack.config.js
var path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

　　在上面的代码中，咱们经过output.filename和output.path属性，来告诉webpack bundle的名称，以及咱们想要生成(emit)到哪里

　　[注意]即便能够存在多个入口起点，但只指定一个输出配置，以下所示output的filename必须为[name]或其相似，不能为肯定的名称，不然会提示Conflict: Multiple assets emit to the same filename bundle.js，翻译过来是多入口不能指定出口文件中一样的filename名称

entry: {
    'main': './entry.js',
    'hello':'./hello.js'
  },
  output: {
    path: __dirname + 'dist',//出口路径
    filename: '[name].js'//出口名称
  }

【用法(Usage)】

　　在webpack中配置output属性，须要将它的值设置为一个对象，并包含filename和path属性这两个必选项

　　filename:编译文件的文件名，首选推荐：main.js||bundle.js||index.js

　　path:对应一个绝对路径，此路径是但愿一次性打包的目录

//webpack.config.js
var config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

【选项(Options)】

output.chunkFilename

　　非入口的chunk(non-entry chunk)的文件名，路径相对于output.path目录

[id] 被chunk的id替换
[name] 被chunk的name替换（或者，在chunk没有name时使用id替换）
[hash] 被compilation生命周期的hash替换
[chunkhash] 被chunk的hash替换

output.crossOriginLoading

　　此选项能够启用跨域加载(cross-origin loading)chunk，可选的值有：

false - 禁用跨域加载(默认值)
"anonymous" - 启用跨域加载。当使用 anonymous 时，发送不带凭据(credential)的请求。
"use-credentials" - 启用跨域加载。发送带凭据(credential)的请求

output.devtoolLineToLine

　　全部指定模块启用行到行映射(line-to-line mapped)模式。行到行映射模式使用一个简单的SourceMap，即生成资源(generated source)的每一行都映射到原始资源(original source)的同一行。这是一个可作性能优化之处。当须要更好的性能，而且只要确保输入行(input line)和生成行(generated line)匹配时，才会考虑启用

true 在全部模块启用（不推荐）
{test, include, exclude} 对象，对特定文件启用（相似于 module.loaders）
默认值：false

output.filename

　　指定硬盘每一个输出文件的名称。在这里不能指定为绝对路径。output.path选项规定了文件被写入硬盘的位置。filename仅用于命名每一个文件

//单个入口
{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

//多个入口
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',//被 chunk 的 name 替换
    path: __dirname + '/build'
  }
}

output.hotUpdateChunkFilename

　　热更新chunk(Hot Update Chunk)的文件名。它们在output.path目录中

[id] 被chunk的id替换
[hash] 被compilation生命周期的hash替换。（最后一个hash存储在记录中）
默认值："[id].[hash].hot-update.js"

output.hotUpdateFunction

　　webpack中用于异步加载(async load)热更新(hot update)chunk的JSONP函数

默认值："webpackHotUpdate"

output.hotUpdateMainFilename

　　热更新主文件(hot update main file)的文件名

[hash] 被compilation生命周期的hash替换。（最后一个hash存储在记录中）
默认值："[hash].hot-update.json"

output.jsonpFunction

　　webpack中用于异步加载(async loading)chunk的JSONP函数

　　较短的函数可能会减小文件大小。当单页有多个webpack实例时，请使用不一样的标识符(identifier)

默认值："webpackJsonp"

output.library

　　若是设置此选项，会将bundle导出为library。output.library是library的名称。

　　若是正在编写library，而且须要将其发布为单独的文件，请使用此选项

output.libraryTarget

　　library的导出格式

"var" - 导出为一个变量：var Library = xxx（默认）
"this" - 导出为 this 的一个属性：this["Library"] = xxx
"commonjs" - 导出为 exports 的一个属性：exports["Library"] = xxx
"commonjs2" - 经过 module.exports：module.exports = xxx 导出
"amd" - 导出为 AMD（可选命名 - 经过 library 选项设置名称）
"umd" - 导出为 AMD，CommonJS2 或者导出为 root 的属性

　　若是output.library未设置，可是output.libraryTarget被设置为var之外的值，则「所导出对象」的每一个属性都被复制到「对应的被导出对象」上（除了amd，commonjs2和umd）

output.publicPath

　　通常地，publicPath用于设置上线地址，在开发过程当中，该值不须要设置

output: {
    filename:'main.js'
    path: "/home/proj/public/assets",
    publicPath: "http://cdn.com"
}

　　以上面代码为例，最终main.js的线上地址是'http://cdn.com/home/proj/public/assets/main.js'

output.path

　　导出目录为绝对路径（必选项）

//config.js
output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}
//index.html
<head>
  <link href="/assets/spinner.gif"/>
</head>

//config.js
output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

　　[注意]在编译时不知道最终输出文件的 publicPath 的状况下，publicPath 能够留空，而且在入口起点文件运行时动态设置。若是你在编译时不知道 publicPath，你能够先忽略它，而且在入口起点设置 __webpack_public_path__

 __webpack_public_path__ = myRuntimePublicPath

output.sourceMapFilename

　　JavaScript 文件的 SourceMap 的文件名

[file] 被 JavaScript 文件的文件名替换
默认值："[file].map"

 

加载器

　　webpack的目标是，让webpack聚焦于项目中的全部资源(asset)，而浏览器不须要关注考虑这些。webpack把每一个文件(.css,.html,.scss,.jpg,etc.)都做为模块处理。然而webpack只理解JavaScript。webpack loader会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中

　　loader可使你在require()或"加载"模块时预处理文件。所以，loader相似于其余构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法

　　webpack的配置要能识别出(identify)应该被对应的loader进行转换(transform)的那些文件。因为进行过文件转换，因此可以将被转换的文件添加到依赖图表(而且最终添加到bundle中)(use属性)

　　常见的加载器loader包括如下三类：

　　一、编译相关：babel-loader、ts-loader

　　二、样式相关：style-loader、css-loader、less-loader、postcss-loader

　　三、文件相关：file-loader、url-loader

var path = require('path');
var config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
module.exports = config;

　　以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。至关于告诉webpack compiler，碰到「在require()/import语句中被解析为'.js'或'.jsx'的路径」时，在把它们添加并打包以前，要先使用babel-loader去转换”

　　[注意]在webpack配置中定义loader时，要定义在module.rules中，而不是rules。在定义错误时webpack会给出严重的警告

【示例】

　　例如，使用loader加载CSS文件，或将TypeScript转为JavaScript。首先，安装对应的loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

　　其次，配置webpack.config.js，对每一个.css文件使用css-loader，而后相似地，对每一个.ts文件使用ts-loader：

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'},
      {test: /\.ts$/, use: 'ts-loader'}
    ]
  }
};

　　[注意]根据配置选项，下面的规范定义了同等的loader用法：

{test: /\.css$/, loader: 'css-loader'}
// 等同于
{test: /\.css$/, use: 'css-loader'}
// 等同于
{test: /\.css$/, use: {
  loader: 'css-loader',
  options: {}
}}

【配置】

　　在应用程序中，有三种使用 loader 的方式：一、经过配置；二、在 require 语句中显示使用；三、经过 CLI

经过配置

　　module.rules容许在webpack配置中指定几个loader。 这是展现loader的一种简明的方式，而且有助于使代码变得简洁。并且对每一个相应的loader有一个完整的概述

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader'},
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

经过require

　　能够在require语句（或define,require.ensure,等语句）中指定loader。使用!将资源中的loader分开。分开的每一个部分都相对于当前目录解析

require('style-loader!css-loader?modules!./styles.css');

　　经过前置全部规则及使用!，能够对应覆盖到配置中的任意loader

　　选项能够传递查询参数，就像在web中那样（?key=value&foo=bar）。也可使用JSON对象（?{"key":"value","foo":"bar"}）

经过CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

　　这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader

【特性】

　　loader 支持链式传递。可以对资源使用流水线(pipeline)。loader 链式地按照前后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript

　　loader 能够是同步或异步函数。loader 运行在 Node.js 中，而且可以执行任何可能的操做

　　loader 接收查询参数。用于 loader 间传递配置。loader 也可以使用 options 对象进行配置

　　除了使用 package.json 常见的 main 属性，还能够将普通的 npm 模块导出为 loader，作法是在 package.json 里定义一个 loader 字段

　　插件(plugin)能够为 loader 带来更多特性。loader 可以产生额外的任意文件。

　　loader 经过（loader）预处理函数，为 JavaScript 生态系统提供了更多有力功能。用户如今能够更加灵活的引入细粒度逻辑，例如压缩(compression)、打包(package)、语言翻译(language translation)和其余更多

【解析】

　　loader 遵循标准的模块解析。多数状况下，loader 将从模块路径（一般将模块路径认为是 npm install, node_modules）解析。

　　loader 模块须要导出为一个函数，而且使用 Node.js 兼容的 JavaScript 编写。在一般状况下，可使用 npm 来管理 loader，也能够将 loader 模块做为应用程序中的文件。按照约定，loader 一般被命名为 xxx-loader（例如 json-loader）

 

插件

　　插件plugin是wepback的支柱功能。在使用webpack配置时，webpack自身也构建于一样的插件系统上。插件目的在于解决loader没法实现的其余事情。因为loader仅在每一个文件的基础上执行转换，而插件(plugins)最经常使用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操做和自定义功能，包括打包优化压缩及配置编译时的变量等功能。webpack的插件系统极其强大和可定制化

　　经常使用的plugin插件包括如下两类：

　　一、优化相关：commonsChunkPlugin、UglifyjsWbpackPlugin

　　二、功能相关：ExtractTextWebpackPlugin、HtmlWebpackPlugin、HotModuleReplacementPlugin、CopyWebpackPlugin

　　想要使用一个插件，只须要require()它，而后把它添加到plugins数组中。多数插件能够经过选项(option)自定义。也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，须要使用new建立实例来调用它

【剖析】

　　webpack插件是一个具备apply属性的JavaScript对象。apply属性会被webpack compiler调用，而且compiler对象可在整个compilation生命周期访问

//ConsoleLogOnBuildWebpackPlugin.js
function ConsoleLogOnBuildWebpackPlugin() {};
ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始！！！");

    callback();
  });
};

【用法】

　　因为plugin能够携带参数/选项，必须在wepback配置中，向plugins属性传入new实例

var HtmlWebpackPlugin = require('html-webpack-plugin'); //经过 npm 安装
var webpack = require('webpack'); //访问内置的插件
var path = require('path');
var config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

 　　最后，介绍两个webpack中常见的名词：chunk和bundle。chunk是指代码块，而bundle是指打包后的代码