小馋猫s
小馋猫s

玩转webpack（一）——基础篇

webpack的打包理念：

一切皆为模块，在webpack中不仅仅js是模块，其他的html，css，图片和字体等都可以成为模块。

为什么使用webpack构建工具

webpack的配置非常灵活，并且具备强大的插件功能。

为什么需要构建工具?

作用：

  1. 转换ES6语法
  2. 转换JSX
  3. CSS前缀补全 / 预处理器（less,sass）
  4. 压缩混淆
  5. 图片压缩

webapck配置文件

默认的配置文件: webpack.config.js

可以指定配置文件：webpack --config + 配置文件名

配置文件组成

module.exports = {
	entry : ' ',           		// 打包的文件入口
	output: ' ',				// 打包的输出
	mode：‘ ’，					// 环境
	module: {
		rules: [  ] 			// loader配置
	},
	plugins: [ ]
}			// 插件配置

安装webpack

  1. 安装webpack之前先安装node.js，因为webpack依赖node.js环境
  2. webpack4将webpack的内核和cli进行了分离，因此需要分别安装webpack 和 webpack-cli

webpack核心概念

1. entry（打包入口）

用法：

  • 单入口（适用于单页应用）： entry是一个字符串，如下：
entry: './src/index.js'
  • 多入口（适用于多页应用）： entry是一个对象。如下：
entry: {
	app: './src/app.js',
	adminApp: './src/admin-app.js'
}

2. output（打包输出：用来告诉webpack如何将编译后的文件输出到磁盘）

用法

output是一个对象，属性有：

  • filename 指定输出文件名
  • path 指定输出文件路径

例如：

output : {
	filename: 'bundle.js',
	path: __dirname + '/dist'
}

当有多个entry入口文件时候，为了保证输出文件名唯一，可以使用占位符，如下：

output : {
	filename:  '[name].js',       
	path: __dirname + '/dist'
}

3. loaders

loaders在webpack里是一个非常重要的概念。

  • webpack原生只支持JS和JSON这两种文件 文件类型，需要通过Loaders去支持其他的文件类型，并且把它们转化为有效的模块，并且可以添加到依赖图中。
  • 在webpack里面比较常见的Loaders有哪些呢？
名称 描述
babel-loader 转换ES6、ES7等JS新特性语言
css-loader 支持.css文件的加载和解析
less-loader 将less文件转换为css
ts-loader 将ts转换为js
file-loader 进行图片，字体等打包
raw-loader 将文件以字符串的形式导入
thread-loader 多进程打包JS和CSS（正常情况下webpack打包是开一个进程的，
使用thread-loader可以让webbpack以多进程的形式打包js和css，让打包更快。）
  • 用法 ： 在module中使用
  • module是个对象，该对象下面有一个rules属性是一个数组，loaders就是在这个数组中使用
module: {
	rules: [
		{ test: /\.txt$/, use: 'raw-loader' }
	]
}

其中test指定匹配规则，use指定要使用的loader

4. plugins（增强webpack打包的功能）

  • 插件主要用于输出文件的优化、资源管理和环境变量注入。用于整个构建过程。

  • 常用的plugins：

名称 描述
CommonsChunkPlugin 通常使用在多个页面打包的情况下
将chunks相同的模块代码提取成公共的js
ClearWebpackPlugin 清理构建目录
ExtractTextWebpackPlugin 将CSS从输出文件中提取成一个独立的CSS文件（分离CSS）
CopyWebpackPlugin 将文件或目录拷贝到构建的输出目录下
HtmlWebpackPlugin 创建html文件去承载输出文件
UglifyjsWebpackPlugin 压缩JS
ZipWebpackPlugin 将打包的资源生成zip包

⚠️

  • 在webpack4中，CommonsChunkPlugin替换成了splitchunksplugin
  • extract-text-webpack-plugin替换成了mini-css-extract-plugin

Plugins用法：
import HtmlWebpackPlugin from 'html-webpack-plugin';

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html'
	})
]

5. mode（用来指定当前的构建环境，一共有3种：production，development，none）

mode这个概念是webpack4提出来的
设置mode可以触发webpack内置函数（自动生成当前生产环境的一些功能等），默认值为production

Mode的内置函数功能有哪些呢？

环境 功能
development 设置process.env.NODE_ENV的值为development
开启NamedChunksPlugin和NamedModulesPlugin（这两个插件在模块热更新阶段很实用，会在控制台打印出是哪个模块发生了热更新，模块路径）
production 设置process.env.NODE_ENV的值为production。
开启FlagDependencyUsagePlugin，FlagIncludeChunksPlugin，ModuleConcatnationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin（这些插件会在生产阶段会默认做一些代码的压缩）
none 不开启任何优化选项

使用示例

1. webpack解析ES6和React JSX

使用babel-loader

module.exports = {
   	// .....
   	module: {
   		rules: [
   			{ test: /\.js$/, use: 'babel-loader' }
   		 ]
   	}
}

babel-loader是依赖Babel转换器的，因此需要在项目中配置Babel，它的配置文件是.babelrc

增加ES6的babel preset配置
需要npm i @babel/core @babel/preset-env babel-loader -D
.babelrc文件如下：

{
	"presets": [
		"@babel/preset-env",		// ES6的babel preset
		"@babel/preset-react"      // React的babel preset
	],
	"plugins": []
}

解析React JSX文件，在.babelrc文件内添加React的babel preset配置(如上)
npm i @babel/preset-react -D

2. webpack解析css、less、sass

解析css需要使用：

  • css-loader用于加载.css文件，并且转换成commonjs对象
  • style-loader将样式通过