webpack初探

2019-07-22 本文已影响0人饼干www

$\color{rgb(255,0,0)}{*}$
[TOC]

一、webpack是干什么的

二、安装webpack

三、核心概念

Entry 入口
Module 模块
在webpack中一切皆模块，一个文件即一个模块。webpack从entry配置的入口文件开始递归找出所有的文件依赖。
Chunk 代码块
一个Chunk由多个模块组合而成，用于代码合并和分割。
Loader 模块转换器
将模块的原内容按照需求转化成新内容。
Plugin 扩展插件
在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果。
Output 输出结果
在webpack经过一系列处理并得到最终想要的代码后输出结果。

四、webpack常用的配置

按照配置所影响的功能划分。

4.1 Entry: 配置模块的入口

Entry数据类型

类型	例子	含义	Chunk名称
string	'./src/app.jsx'	入口模块的文件路径，可以是相对路径	main
array	['./src/app1.jsx','./src/app2.jsx']	入口模块的文件路径，可以是相对路径	main
object	{ app: './src/app.jsx',app2: './src/app2.jsx'}	配置多个入口，每个入口生成一个Chunk	app app2

4.2 Output: 配置如何输出最终想要的代码。

4.2.1 filename

配置输出文件的名称，string类型。
按照输出文件个数，取相应的名字。
如果只有一个输出文件，则可以取一个静态名称 filename: 'bundle.js'
如果是多个根据Chunk的名称区分输出的文件名。例如：filename: '[name].js'
[name]代表用内置的name取替换[name]，这时候我们可以将它看作一个字符串模板函数。内置变量除了name，还包括：

变量名	含义
id	Chunk的唯一标识，从0开始
name	Chunk的名称
hash	Chunk的唯一标识的hash值，其中[hash:8]代表取8位Hash值
chunkHash	Chunk内容的hash值

4.2.2 chunkFilename

配置无入口的Chunk在输出时文件名称。它只用于指定在运行过程中生成的Chunk在输出时的名称。会在运行时生成Chunk的常见场景包括：使用CommonChunkPlugin、使用import('path/to/module')动态加载等。chunkFilename支持和filename一致的内置变量。

4.2.3 path

output.path配置输出文件存放在本地的目录，必须是string类型的绝对路径。通常是Node.js的path模块去获取绝对路径。

path: path.resolve(__dirname, 'dist_[hash]')

4.2.4 $\color{rgb(255,0,0)}{*}$ publicPath

4.2.5 $\color{rgb(255,0,0)}{*}$ crossOrginLoading

4.2.6 $\color{rgb(255,0,0)}{*}$ libaryTarget 和 library

4.2.7 $\color{rgb(255,0,0)}{*}$ libaryExport

4.3 Module: 配置处理模块的规则。

4.3.1 配置Loader

rules配置模块的读取和解析规则，array类型。数组里每一项都描述了如何处理部分文件。配置一项rules时大致可通过以下方式来完成。

条件匹配：通过test、include、exclude三个配置项来选中Loader要应用的规则的文件。
应用规则：对选中的文件通过use配置项来应用Loader，可以只应用一个Loader或者按照从后往前的顺序应用一组Loader，同时可以分别向Loader传入参数。
重置顺序：一组Loader的执行顺序默认是从右往左执行的，通过enforce选项可以将其中一个Loader的执行顺序放到最前或者最后(enforce: 'pre' 将该Loader的执行顺序放到最前。 ‘post’放到最后)。

4.4 Resolve: 配置寻找模块的规则。

4.4.1 alias

配置项通过别名来将导入路径映射成一个新的导入路径。例如使用以下配置：

resolve: {
  alias: {
    components: './src/components/'
  }
}

当通过import Button from 'components/button'导入时，实际上被alias等价替换成了import Button from './src/components/button'

4.4.2 $\color{rgb(255,0,0)}{*}$ mainFields

优先配置哪份代码

4.4.3 extensions

如果导入语句没加后缀名，例如 require('./data')。
配置extensions: ['.ts', '.js', '.json']，会优先加上ts后缀，如果没找到这样的文件，再去匹配js文件，以此类推，如果没找到，报错。

4.4.4 $\color{rgb(255,0,0)}{*}$ modules

配置webpack去哪些目录下寻找第三方模块，默认只会去node_modules目录下寻找。

4.5 Plugins: 配置扩展插件。

plugins配置项接收一个数组，数组里的每一项都是一个要使用的Plugin的实例，Plugin需要的参数通过构造函数传入。

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
  plugins: [
    new CommonsChunkPlugin({
      name: 'common',
      chunks: ['a', 'b']
    })
  ]
}

4.6 $\color{rgb(255,0,0)}{*}$ DevServer: 配置DevServer。

通过DevServer启动Webpack时，配置文件里的devServer才会生效，因为这些参数所对应的功能都是DevServer提供的，Webpack本身并不认识devServer配置项。

4.6.1 hot 配置是否启用模块热替换功能。

DevServer的默认行为是发现源代码被更新后通过自动刷新整个页面来做到实时预览，开启模块替换功能后，将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览。

// 是否开启模块热替换功能
hot: true

4.6.2 inline

4.6.3 historyApiFallback

// 是否开发HTML5 History API网页
historyApiFallback: true

4.6.4 contentBase

// 配置DevServer HTTP服务器的文件根目录
contentBase: path.join(__dirname, 'public')

4.6.5 headers

4.6.6 host

4.6.7 port

4.6.8 allowedHosts

4.6.9 disableHostCheck

4.6.10 https

// 是否开启HTTPS模式
https: false

4.6.11 clientLogLevel

4.6.12 compress

// 是否开启Gzip压缩
compress: true

4.6.13 open

4.7 其他配置项:

4.7.1 $\color{rgb(255,0,0)}{*}$ Target

target: 'web', // 浏览器，默认
target: 'webworker', // WebWorker
target: 'node', // Node.js,使用`require`语句加载Chunk代码
target: 'async-node', // Node.js, 异步加载Chunk代码
target: 'node-webkit', // nw.js
target: 'electron-main', // electron，主线程
target: 'electron-renderer', // electron，渲染线程

4.7.2 Devtool

devtool: 'source-map'

4.7.3 $\color{rgb(255,0,0)}{*}$ Watch 和 WatchOptions

watch: true,
watchOptions: { // 监听模式选项
  // 不监听的文件或文件夹，支持正则匹配。默认为空
  ignored: /node_modules/,
  // 监听到变化发生后，等300ms再执行动作，截流，防止文件更新太快导致重新编译频率太快。默认为300ms
  aggregateTimeout: 300,
  // 不停地询问系统指定的文件有没有发生变化，默认每秒询问1000次
  poll: 1000
}

4.7.4 Externals

// 使用来自JavaScript运行环境提供的全局变量
externals: {
  jquery: 'jQuery'
}

4.7.5 $\color{rgb(255,0,0)}{*}$ ResolveLoader

用来告诉webpack如何去寻找Loader，因为在使用Loader时是通过其包名去引用的，Webpack需要根据配置的Loader包名去找到Loader的实际代码，以调用Loader去处理源文件。
默认配置如下：

module.exports = {
  resolveLoader: {
    // 去哪个目录下寻找Loader
    modules: ['node_modules'],
    // 入口文件的后缀
    extensions: ['.js', '.json'],
    // 指明入口文件位置的字段
    mainFields: ['loader', 'main']
  }
}

该配置常用于加载本地的Loader

webpack配置