webpack系列--入门

这篇文章主要内容是webpack的基本概念。

webpack是什么？

webpack是一个JavaScript应用程序的静态模块打包器，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

webpack的特点

插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。

速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。

丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。

高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。

代码拆分：webpack可以将你的代码分片，从而实现按需打包。这种机制可以保证页面只加载需要的JS代码，减少首次请求的时间。

优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。

开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。

使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

webpack的基本概念

入口【entry】

入口起点指示webpack以哪个文件为起点构建内部依赖图。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。入口定义方式有多种，可以是string，可以是object也可以是array，通常使用object方式。

webpack.config.js

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

module.exports = {
  entry: './path/to/my/entry/file.js'
};

module.exports = {
  entry: ['./path/to/my/entry/file.js', './path/to/my/entry/file1.js']
}

出口【output】

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

Output用于配置打包输出的文件，包括输出文件的文件名、输出路径、静态资源地址，这里列出最常用的4种：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    path: __dirname + '/dist',
    publicPath: 'http://cdn.example.com/assets/[hash]/'
  }
};

我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。

publicPath: 用于设置打包过程中产生的静态文件的最终引用地址，静态文件放置在CDN上，通过publicPath就可以很方便地设置。

chunkFilename: 用于设置非entry入口的chunk的输出文件名

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

示例

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

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

然后指示 webpack 对每个.css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

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

插件【plugins】

loader 被用于转换某些类型的模块，而插件范围更广，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack提供了很多开箱即用的插件，可以点击插件列表查看。

模式【mode】

webpack提供两种模式的内置优化：development 和 production，两种模式启用的插件不同。

mode	plugins
development	NamedChunksPlugin 和 NamedModulesPlugin
production	FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

简单介绍一下上面所提到的插件吧

NamedChunksPlugin: 根据文件名称生成稳定chunkid，

NamedModulesPlugin: 热更新时使用的插件，显示模块的相对路径。

FlagDependencyUsagePlugin：删除无用代码的，其他插件依赖

FlagIncludedChunksPlugin：删除无用代码的，其他插件依赖

ModuleConcatenationPlugin: 在webpack打包时，将bundle 内各个模块预编译到一个闭包中，提升代码在浏览器中的执行速度（相比之前的打包方式---每个模块都是一个闭包）。

NoEmitOnErrorsPlugin：在编译出现错误时，跳过输出阶段。这样可以确保输出资源不会包含错误

OccurrenceOrderPlugin：比对id的使用频率和分布来得出最短的id分配给使用频率高的模块

SideEffectsFlagPlugin： Tree shaking

UglifyJsPlugin：js代码压缩

webpack.config.js


module.exports = {
  mode: 'production'
};

总结一下

entry设置webpack的入口位置，output设置webpack的出口和产出，loader可以使得webpack处理更多类型的文件，plugins让webpack变得更强大，解决loader无法解决的其他事，mode提供了生产环境和开发环境两种环境的内置优化模式。

webpack是一款打包工具，可以对模块进行压缩、预处理、按需打包、按需加载等。其插件化、丰富的loader、代码拆分、提供不同模式的优化机制、开发模式友好等重要特性让我们在整个开发过程中更加的方便和高效。