什么是webpack
webpack
本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包。下面是webpack官网给的一个说明图。
如上图,webpack 会把项目中使用到的多个代码模块(可以是不同文件类型),打包构建成项目运行仅需要的几个静态文件(如.js、.css等)。
webpack 安装
webpack支持使用npm
或者yarn
方式进行安装,当然也可以作为一个全局的命令来使用。
1 | npm install webpack webpack-cli -g |
webpack的几个核心概念
webpack的配置文件通常为webpack.config.js
,放置于项目的根目录中。此外,也能够使用webpack --config
来指定使用的配置文件。
一个简单的配置文件如下:
1 | // webpack.config.js |
entry
entry
用于指定打包入口。目前入口文件只支持js
,其它的如html
和css
都不支持。
webpack会把js
、css
、图片
等等当成一个个模块,各模块间会存在一系列的依赖关系,在webpack里面,会根据entry
指定的文件,找到依赖,entry
文件的依赖也可能会以来其他模块,这样就会生成一棵依赖树
。webpack会遍历这课依赖树,遍历完了才会生成打包资源。
entry可以指定单入口与多入口。
单入口
单入口适用于单页应用,其使用一个字符串来给定入口文件的地址,如下:
1 | entry: './src/index.js' |
多入口
多入口适用于多页应用,其使用一个对象来给定入口文件的地址,该对象为键值对的形式,键为入口模块的名字,值为文件地址如下:
1 | entry: { |
output
output
指定编译后的文件如何输出到磁盘,注意,即使可以存在多个entry
起点,但只能指定一个output
配置。
output
的值必须为一个对象,并且包含以下两个属性:
filename
用于输出文件的文件名。path
用于指定目标输出文件的绝对路径。
示例如下:
1 | output: { |
以上示例是针对单入口的配置。如果是多入口,可以使用占位符[name]
来确保每个文件具有唯一的名称。
1 | entry: { |
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 | module: { |
plugins
plugin
用于bundle文件的优化,资源管理和环境变量的引入,作用于整个构建过程
常见的plugin
名称 | 用处 |
---|---|
cleanWebpackPlugin | 清理构建目录 |
miniCssExtractPlugin | 将CSS从bundle里提取成一个独立的css文件 |
htmlWebpackPlugin | 创建html文件 |
uglifyjsWebpackPlugin | 压缩js |
用法
1 | plugins: [ // 将使用的plugin放到plugins数组中 |
mode
mode
用于指定当前构建环境,可取值为:development / production / none
设置mode
可以使用webpack的一些内置函数。
选项 | 描述 |
---|---|
development | 设置process.env.NODE_ENV 的值为development ,开启NamedChunksPlugin 和NamedModulesPlugin |
production | 设置process.env.NODE_ENV 的值为production ,开启FlagDependencyUsagePlugin ,FlagIncludedChunksPlugin ,ModuleConcatenationPlugin ,NoEmitOnErrorPlugin ,OccurrenceOrderPlugin ,SideEffectsFlagPlugin ,TerserPlugin |
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 。