阅读 1567

一文速览Webpack

Webpack是一个打包模块化JavaScript的工具,在Webpack里一切文件皆模块,通过Loader转换文件,通过Plugin注入钩子,最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目,称为模块打包机。

1. 核心概念

entry

入口,Webpack执行构建的第一步将从entry开始,可抽象成输入;

module.exports = {
  entry: './main.js'
};
复制代码

output

输出结果,在Webpack经过一系列处理并得到最终想要的代码后输出结果;

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist');
  }
};
复制代码

loader

模块转换器,用于将模块的原内容按照需求转换成新内容;

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist');
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader?minimize'],
      }
    ]
  }
};
复制代码

plugins

扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果或我们想做的事情;

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist');
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          use: ['css-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      fliename: `[name]_[contenthash:8].css`,
    })
  ]
};
复制代码

module

模块,在Webpack里一切皆模块,一个模块对应一个文件。Webpack会从配置的entry开始递归找出所有依赖的模块;

chunk

代码块,一个chunk由多个模块组合而成,用于代码合并与分割;

总结: Webpack在启动后会从Entry里配置的Module开始,递归解析Entry依赖的所有Module。每找到一个Module,就会根据配置的Loader去找出对应的转换规则,对Module进行转换后,再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组,一个Entry及其所有依赖的Module被分到一个组也就是一个Chunk。最后Webpack会将所有Chunk转换成文件输出,在整个流程中,Webpack会在恰当的时机执行Plugin里定义的逻辑。

2. 基本配置

1. Entry

  • context

Webpack在寻找相对路径的文件时会以context为根目录,context默认为当前所在的工作目录,注意context必须是一个绝对路径的字符串

module.exports = {
  context: path.resolve(__dirname, 'app'),
};
复制代码
  • Entry类型
类型 例子 含义
String './main.js' 入口模块的文件路径,可以是相对路径
Array ['./main.js', './app.js'] 入口模块的文件路径,可以是相对路径
Object {a: './main.js', b: './app.js'} 配置多个入口,每个入口生成一个chunk
  • chunk的名称

chunk的名称和entry的配置有关,如果entry是一个String或Array,只会生成一个chunk;如果entry是一个Object,就会生成多个chunk,名称为Object中的key。

  • 配置动态Entry

如果不确定有多少个页面入口,可以设置为一个函数动态的返回entry配置;

// 同步函数
entry: () => {
  return {
    a: './page1/index',
    b: './page2/index'
  }
}
// 异步函数
entry: () => {
  return new Promise( (resolve) => {
    resolve({
      a: './page1/index',
      b: './page2/index'
    })
  })
}
复制代码

2. Output

  • filename

filename是配置输出的文件名称,为string类型,如果只有一个输出文件可以写死为bundle.js,但是有多个输出时可以借助模板变量[name].js,常用的变量包括:

变量名称 含义
id Chunk的唯一标识,默认从0开始
name Chunk的名称
hash Chunk的唯一标识的Hash值,[hash:8]代表取8位Hash值,默认是20位
chunkhash Chunk内容的Hash值,取值同上
  • chunkFilename

用于指定在运行过程中生成的Chunk在输出时的文件名称,常见场景为使用CommonChunkPlugin;支持和filename一致的内置变量;

  • path

配置输出文件的本地目录,为string类型的绝对路径,支持字符串模板,内置变量只有一个Hash;

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist_[hash]')
  }
};
复制代码
  • publicPath

配置发布到线上资源的URL前缀,为string类型的相对路径,默认为'',也支持字符串模板,内置变量只有一个Hash;

module.exports = {
  output: {
    filename: '[name]_[chunkhash:8].js',
    publicPath: 'https://XX.cdn.com/static/' 
  }
};
复制代码
  • crossOriginLoading

Webpcak输出的部分代码块可能需要异步加载,是通过JSONP方式实现的,所以可以在<script>标签中设置crossorigin属性,常用来获取异步加载的脚本执行时的详细错误信息。

crossorigin属性值 含义
anonymous(默认) 在加载此脚本资源时不会带上用户的cookie
use-credentials 在加载此脚本资源时带上用户的cookie
  • LibraryTarget和library

当用Webpack去构建一个可以被其他模块导入使用的库时,需要用到LibraryTarget和library,它们通常搭配在一起使用,推荐使用Rollup来构建基础库;

LibraryTarget配置以何种方式导出库,常用的有var/this/commonjs/window/global等;

Library配置导出库的名称,配合LibraryTarget一起使用;
复制代码
  • LibraryExport

配置为要导出的模块中哪些子模块需要被导出,它只有在output.libraryTarget被设置为commonjs或者commonjs2时使用才有意义;

// 某模块源代码
export const a = 1;
export default b = 2;

// 如果在output.libraryExport设置为a;那么将构建输出的代码和使用方法将变成以下内容:
// Webpack输出的代码
module.export = lib_code['a'];
// 使用库的方法
require('library-name') === 1;
复制代码

3. Module

  • 配置Loader

rules配置模块的读取和解析规则,通常用来配置Loader。类型为数组,数组里的每一项都描述了如何处理部分文件,每一项大致有如下三种方式来完成;

  1. 条件匹配: 通过test、include、exclude三个配置项来选中Loader要处理的文件;
  2. 应用规则: 对选中的文件通过use配置项来应用Loader,也可以是一个,也可以是按照从后往前的顺序一组Loader,同时可以分别向Loader传入参数;
  3. 重要顺序: 一组Loader的默认顺序是从右往左执行的,通过enforce选项可以将其中一个Loader放在最前(pre)或最后(post);
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          },
          enforce: 'post'
        }],
        include: path.resolve(__dirname, 'src'),
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: path.resolve(__dirname, 'node_modules')
      }
    ]
  }
};
复制代码
  • noParse

该可选配置项可以让Webpack忽略对部分没采用模块化的文件的递归解析和处理,从而提高构建性能,类型为RegExp、[RegExp]、Function中的一种,注意被忽略的文件里不能包含import、require、define等模块化语句,不然会导致在浏览器中无法执行该模块化语句;

// 正则形式
noParse: /jquery|chartjs/
// 函数形式
noParse: (content) => {
  return /jquery|chartjs/.test(content);
}
复制代码
  • parser

该配置项可以精确到语法层面,让Webpack只解析对应的模块化文件;

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.resolve(__dirname, 'src'),
        parser: {
          amd: false,
          commonjs: true,
          requirejs: false,
          harmony: true
        }
      }
    ]
  }
};
复制代码

4. Resolve

  • alias

该配置项通过别名来将原导入路径映射成一个新的导入路径;

module.exports = {
  resolve: {
    alias: {
      @components: './src/common/components',
      @assets: './src/common/assets'
    }
  }
};
复制代码
  • mainFields

有一些第三方模块会针对不同的环境提供几份代码,例如分别提供ES5和ES6两份代码,Webpack会根据mainFields的配置去决定优先采用哪份代码,如果想优先采用ES6的代码,则可以这样配置:

mainFields: ['jsnext:main', 'browser', 'main'],
复制代码
  • extensions

在导入语句没带文件后缀时,Webpack会自动带上后缀尝试访问文件是否存在,默认是:

extensions: ['.js', '.json'],
复制代码

如果我们想让Webpack优先使用typescript文件,则可以这样配置:

extensions: ['.ts', '.js', '.json']
复制代码
  • modules

配置Webpack去哪些目录下寻找第三方模块,有时候我们项目中的大量模块会放在common下面,则可以这样去配置:

modules: ['./src/common', 'node_modules']
复制代码
  • descriptionFiles

该配置项是描述第三方模块的文件名称,也就是package.json文件,默认如下:

descriptionFiles: ['package.json']
复制代码
  • enforceExtension

如果resolve.enforceExtension为true,则所有导入语句都必须带后缀,如import './main.js';

  • enforceModuleExtension

和resolve.enforceExtension作用类似,专门针对node_modules下的模块生效,因为第三方模块大部分是不带后缀的,如果resolve.enforceExtension设置为true了,需要把resolve.enforceModuleExtension设为false来兼容第三方模块;

5. Plugin

Plugin的配置很简单,plugins接收一个数组,数组中的每一项都是一个Plugin的实例,Plugin的参数通过构造函数传入;

module.exports = {
  plugins: [
    new CommonChunkPlugin({
      name: 'common',
      chunks: ['a', 'b']
    })
  ]
};
复制代码

6. DevServer

  • hot

开启模块热替换功能,在不刷新整个页面的情况下,通过用新模块替换老模块来做到实时预览;

  • inline

用于配置是否将这个代理客户端自动注入将运行在页面中的chunk里,默认自动注入;

-- 如果开启inline,则devserver会在构建变化后的代码时通过代理客户端控制网页刷新;

-- 如果关闭inline,则devserver会通过iframe的方式去运行要开发的网页,在构建完变化后的代码时,会通过刷新iframe来实现实时预览,这时需要去http://localhost:8080/webpack-dev-server/ 实时预览自己的网页;

  • historyApiFallback

用于方便的开发使用了HTML5的History API的单页应用,总是返回同一个html文件,浏览器会从URL里解析出当前页面的状态,从而显示对应的界面;

  • contentBase

用来配置devserver HTTP服务器的文件根目录,在默认情况下为当前的执行目录,通常是项目的根目录,所以在一般情况下不必设置;

  • headers

可以在http响应中注入一些http响应头,使用如下:

module.exports = {
  devServer: {
    headers: {
      'x-cookie': 12345
    }
  }
};
复制代码
  • host

用于配置devServer服务监听的地址,如果想让局域网的其他设备访问自己的本地服务,则可以在启动devserver时带上参数--host 0.0.0.0;

  • port

用于配置devServer服务监听的端口,默认使用8080端口,如果80端口被其他程序占用则依次+1类推;

  • allowedHosts

配置一个白名单列表,只有http请求的host在该列表中才会正常返回;

  • disableHostCheck

配置是否关闭用于DNS重新绑定的http请求的host检查,devserver默认只接受本地的请求,关闭后可以接收来自任意host的请求;

  • https

devsever默认使用http服务,在某些情况下需要使用https服务时,可以开启此配置,此时devsever会自动为我们在本地生成一份https证书,这时需要重启服务,如HTTP2和Service Worker就必须运行在https上;

  • clientLogLevel

配置客户端的日志等级,会影响我们在浏览器控制台里看到的内容,默认为info级别,即输出所以类型(none/error/warning/info)的日志;

  • compress

配置是否启用Gzip压缩,为Boolean类型,默认为false;

  • open

用于在devserver启动且第一次构建完成时,自动用系统默认浏览器打开我们开发的页面,还提供了openPage配置项来打开指定URL的页面;

7. 其它

  • Target

target配置可以让Webpack构建除针对不同运行环境的代码,常见的有:

target值 含义
web 针对浏览器(默认),所有代码都集中在一个文件里
node 针对nodejs,使用require语句加载chunk代码
async-node 针对nodejs,异步加载chunk代码
webworker 针对webworker
electron-mian 针对Electron主线程
electron-render 针对Electron渲染线程
  • Devtool

配置Webpack如何生成Source Map,默认值是false即不生成,若想构建出的代码生成Source Map方便调试,则可以这样配置:

module.exports = {
  devtool: 'source-map'
};
复制代码
  • Watch和WatchOptions

Webpack支持监听文件更新,在文件发生变化时重新编译,监听模式默认是关闭的,如想打开则配置为:

module.exports = {
  watch: true
};
复制代码

在使用devserver时,监听模式默认开启;除此之外,还可以灵活的控制监听模式;

module.exports = {
  watch: true,
  watchOptions: {
    // 不监听的文件或文件夹,支持正则匹配
    ignored: /node_modules/,
    // 监听到变化后会等300ms再去执行,防抖
    // 默认是300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化通过不停地询问系统指定文件有没有变化
    // 默认每秒询问1000次
    poll: 1000
  }
};
复制代码
  • Externals

用于告诉Webpack要构建的代码中使用了哪些不用被打包的模块,也就是说这些模版是外部环境提供的,Webpack在打包时可以忽略它们;

module.exports = {
  externals: {
    jquery: 'jQuery'
  }
};
复制代码
  • ResloveLoader

用来告诉Webapck如何去寻找Loader,该配置项常用来加载本地的Loader,默认配置如下:

module.exports = {
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['js', 'json'],
    mainFields: ['loader', 'main']
  }
};
复制代码

3. 性能优化

优化开发体验:

1. 缩小文件搜索范围

2. 使用DllPlugin

3. 使用HappyPack

4. 使用ParallelUglifyPlugin

5. 使用自动刷新

6. 开启模块热替换

优化输出质量:

1. 压缩代码

2. CDN加速

3. 抽取公共代码

4. 使用Tree Shaking

5. 使用Code Spliting

6. 开启Scope Hoisting

7. 输出分析

4. 常用Loader

文件

Loader名称 功能描述
raw-loader 加载文件原始内容(utf-8)
val-loader 将代码作为模块执行,并将 exports 转为 JS 代码
url-loader 像 file loader 一样工作,但如果文件小于限制,可以返回 data URL
file-loader 将文件发送到输出文件夹,并返回(相对)URL

JSON

Loader名称 功能描述
json-loader 加载 JSON文件(默认包含)
json5-loader 加载和转译 JSON 5文件

转换编译(Transpiling)

Loader名称 功能描述
script-loader 在全局上下文中执行一次 JavaScript 文件(如在 script 标签),不需要解析
babel-loader 加载 ES2015+ 代码,然后使用 Babel 转译为 ES5
buble-loader 使用 Bublé 加载 ES2015+ 代码,并且将代码转译为 ES5
traceur-loader 加载 ES2015+ 代码,然后使用 Traceur转译为 ES5
ts-loaderawesome-typescript-loader 像 JavaScript 一样加载 TypeScript2.0+
coffee-loader 像 JavaScript 一样加载 CoffeeScript

模板(Templating)

Loader名称 功能描述
html-loader 导出 HTML 为字符串,需要引用静态资源
pug-loader 加载 Pug 模板并返回一个函数
jade-loader 加载 Jade 模板并返回一个函数
markdown-loader 将 Markdown 转译为 HTML
react-markdown-loader 使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件
posthtml-loader 使用 PostHTML 加载并转换 HTML 文件
handlebars-loader 将 Handlebars 转移为 HTML
markup-inline-loader 将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体,或将 CSS 动画应用于 SVG 时非常有用。

样式

Loader名称 功能描述
style-loader 将模块的导出作为样式添加到 DOM 中
css-loader 解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码
less-loader 加载和转译 LESS 文件
sass-loader 加载和转译 SASS/SCSS 文件
postcss-loader 使用 PostCSS加载和转译 CSS/SSS 文件
stylus-loader 加载和转译 Stylus 文件

清理和测试(Linting && Testing)

Loader名称 功能描述
mocha-loader 使用 mocha 测试(浏览器/NodeJS)
eslint-loader PreLoader,使用 ESLint 清理代码
jshint-loader PreLoader,使用 JSHint 清理代码
coverjs-loader PreLoader,使用 CoverJS 确定测试覆盖率

框架(Frameworks)

Loader名称 功能描述
vue-loader 加载和转译 Vue 组件
polymer-loader 使用选择预处理器(preprocessor)处理,并且 require() 类似一等模块(first-class)的 Web 组件
angular2-template-loader 加载和转译 Angular 组件

5. 常用Plugin

Plugin名称 功能描述
AggressiveSplittingPlugin 将原来的 chunk 分成更小的 chunk
BabelMinifyWebpackPlugin 使用 babel-minify进行压缩
BannerPlugin 在每个生成的 chunk 顶部添加 banner
CommonsChunkPlugin 提取 chunks 之间共享的通用模块
CompressionWebpackPlugin 预先准备的资源压缩版本,使用 Content-Encoding 提供访问服务
ContextReplacementPlugin 重写 require 表达式的推断上下文
CopyWebpackPlugin 将单个文件或整个目录复制到构建目录
DefinePlugin 允许在编译时(compile time)配置的全局常量
DllPlugin 为了极大减少构建时间,进行分离打包
EnvironmentPlugin DefinePluginprocess.env 键的简写方式。
ExtractTextWebpackPlugin 从 bundle 中提取文本(CSS)到单独的文件
HotModuleReplacementPlugin 启用模块热替换(Enable Hot Module Replacement - HMR)
HtmlWebpackPlugin 简单创建 HTML 文件,用于服务器访问
I18nWebpackPlugin 为 bundle 增加国际化支持
IgnorePlugin 从 bundle 中排除某些模块
LimitChunkCountPlugin 设置 chunk 的最小/最大限制,以微调和控制 chunk
LoaderOptionsPlugin 用于从 webpack 1 迁移到 webpack 2
MinChunkSizePlugin 确保 chunk 大小超过指定限制
NoEmitOnErrorsPlugin 在输出阶段时,遇到编译错误跳过
NormalModuleReplacementPlugin 替换与正则表达式匹配的资源
NpmInstallWebpackPlugin 在开发时自动安装缺少的依赖
ProvidePlugin 不必通过 import/require 使用模块
SourceMapDevToolPlugin 对 source map 进行更细粒度的控制
EvalSourceMapDevToolPlugin 对 eval source map 进行更细粒度的控制
UglifyjsWebpackPlugin 可以控制项目中 UglifyJS 的版本
ZopfliWebpackPlugin 通过 node-zopfli 将资源预先压缩的版本

更多第三方LoaderPlugin,查看 awesome-webpack 列表。

本文整理于【深入浅出Webpack】,如有错误,敬请雅正😄

更多精彩内容欢迎关注我的公众号【天道酬勤Lewis】

关注下面的标签,发现更多相似文章
评论