0%

webpack的几个核心概念

什么是webpack

webpack本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包。下面是webpack官网给的一个说明图。
webpack-introduction
如上图,webpack 会把项目中使用到的多个代码模块(可以是不同文件类型),打包构建成项目运行仅需要的几个静态文件(如.js、.css等)。

webpack 安装

webpack支持使用npm或者yarn方式进行安装,当然也可以作为一个全局的命令来使用。

1
2
3
npm install webpack webpack-cli -g 

# 或者yarn global add webpack webpack-cli

webpack的几个核心概念

webpack的配置文件通常为webpack.config.js,放置于项目的根目录中。此外,也能够使用webpack --config来指定使用的配置文件。
一个简单的配置文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
const path = requore('path')

module.exports = {
entry: './src/index.js', // 指定入口文件
output: { // 指定输出文件
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js'
},
mode: 'development', // 指定构建环境
module: {
rules: [] // 配置loaders
},
plugins: [] // 配置plugins
}

entry

entry 用于指定打包入口。目前入口文件只支持js,其它的如htmlcss都不支持。

webpack会把jscss图片等等当成一个个模块,各模块间会存在一系列的依赖关系,在webpack里面,会根据entry指定的文件,找到依赖,entry文件的依赖也可能会以来其他模块,这样就会生成一棵依赖树。webpack会遍历这课依赖树,遍历完了才会生成打包资源。

entry可以指定单入口与多入口。

单入口

单入口适用于单页应用,其使用一个字符串来给定入口文件的地址,如下:

1
entry: './src/index.js'

多入口

多入口适用于多页应用,其使用一个对象来给定入口文件的地址,该对象为键值对的形式,键为入口模块的名字,值为文件地址如下:

1
2
3
4
5
entry: {
app: './src/app.js',
search: './src/search.js'
// ...
}

output

output 指定编译后的文件如何输出到磁盘,注意,即使可以存在多个entry起点,但只能指定一个output配置。

output的值必须为一个对象,并且包含以下两个属性:

  1. filename 用于输出文件的文件名。
  2. path 用于指定目标输出文件的绝对路径。

示例如下:

1
2
3
4
5
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
// 此配置将生成一个单独的 bundle.js 文件输出到项目的 /dist 目录中。

以上示例是针对单入口的配置。如果是多入口,可以使用占位符[name]来确保每个文件具有唯一的名称。

1
2
3
4
5
6
7
8
9
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
// 此配置将生成两个文件 ./dist/app.js, ./dist/search.js。

loaders

webpack原生只支持js和json,通过loaders去支持其他文件类型,如css,并把他们转化为有效模块,并可以添加到依赖图中。

loader本身是一个函数,接受源文件为参数,返回转换后的结果。

常见的loader

名称 用处
babel-loader 转换ES6/ES7等JS新特性语法
css-loader 支持.css的解析和加载
less-loader 将less转换为css
ts-loader 将TS转换为JS

用法

1
2
3
4
5
6
module: {
rules: [ // 将需要的loader放在module对象的rules数组中
'bable-loader', // 可以直接使用loader名称
{ test: /\.txt$/, use: 'raw-loader' }, // test - 指定匹配规则,use - 指定使用的loader名称
]
}

plugins

plugin用于bundle文件的优化,资源管理和环境变量的引入,作用于整个构建过程

常见的plugin

名称 用处
cleanWebpackPlugin 清理构建目录
miniCssExtractPlugin 将CSS从bundle里提取成一个独立的css文件
htmlWebpackPlugin 创建html文件
uglifyjsWebpackPlugin 压缩js

用法

1
2
3
plugins: [ // 将使用的plugin放到plugins数组中
new HtmlWebpackPlugin({ template: './src/index.html' })
]

mode

mode用于指定当前构建环境,可取值为:development / production / none

设置mode可以使用webpack的一些内置函数。

选项 描述
development 设置process.env.NODE_ENV的值为development,开启NamedChunksPluginNamedModulesPlugin
production 设置process.env.NODE_ENV的值为production,开启FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorPluginOccurrenceOrderPluginSideEffectsFlagPluginTerserPlugin
none 不开启任何优化选项

关于path.resolve([…paths])

将路径或路径片段处理成绝对路径。

path 从右到左依次处理,直到构造出绝对路径。 例如,指定的路径片段是:/foo、/bar、baz,则调用 path.resolve('/foo', '/bar', 'baz') 会返回 /bar/baz
如果处理完全部 path 片段后还未产生绝对路径,则加上当前工作目录。
生成的路径会进行规范化,并且删除末尾的斜杠,除非路径是根目录。
空字符串的 path 片段会被忽略。
如果没有指定 path,则返回当前工作目录的绝对路径。
Node.js 中,__dirname总是指向被执行 js 文件的绝对路径,所以当在 /d1/d2/myscript.js 文件中写了 __dirname, 它的值就是 /d1/d2 。