webpack

最新推荐文章于 2024-06-28 10:54:49 发布

原创最新推荐文章于 2024-06-28 10:54:49 发布

· 241 阅读

0 ·

版权

文章标签：

#webpack #javascript #前端

前端专栏收录该内容

18 篇文章

订阅专栏

webpack是什么？

webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端所有资源文件（js/json/css/img/less）等都会作为模块处理。他会根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

webpack的5个核心概念

entry

入口指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图

output

输出指示webpack打包后的资源budles输出到哪里去，以及如何命名

loader

loader让webpack能够处理那些非js文件（webpack本身只理解javascript）

plugins

插件可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

mode

模式指示webpack使用相应模式的配置
包括开发模式和生产模式

webpack初体验

安装命令

npm i webpack webpack-cli -g

运行指令

开发环境
webpack 入口文件 -o 出口文件 --mode=development
生产环境
webpack 入口文件 -o 出口文件 --mode=production
注意
webpack可以处理js和json资源，不能处理css/img等其他资源
生产环境比开发环境多一个压缩js代码
生产环境和开发环境都会把ES6模块的代码编译成浏览器能够识别的语法

打包样式资源

webpack.config.js文件
该文件是webpack的配置文件，一般放在项目根目录下可以如下进行配置
配置好配置文件后直接运行webpack即可打包编译

// webpack配置文件 指示webpack干哪些活
// 要使用node.js语法
// 所有构建工具都是基于nodejs平台运行
// nodejs平台默认模块化是commonjs

const {resolve} =  require('path')

module.exports = {
	// webpack配置
	
	// 入口文件
	entry: './src/index.js',
	
	// 出口文件
	output: {
		filename: 'main.js',
		path: resolve(__dirname, './src/build')
	},
	
	// loader配置
	module: {
		rules: [
			// 详细的loader配置
			{
				test: /\.css$/,  //匹配css文件
				use: [  //使用哪些loader进行处理
					'style-loader', //创建style标签，将js中的样式资源插入到head标签中生效
					'css-loader'  //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
				]
			}
		]
	},
	
	plugins: [
		// 详细的插件配置
	],
	
	// 模式配置  生成环境或开发环境
	mode: 'development'
}

注意的是处理样式资源需要安装css-loader和style-loader两个loader
写好配置文件后就可以在项目根路径下直接输入webpack进行打包构建了

注意处理less文件时，需要安装less-loader,在webpack配置文件中的module中的rules中进行配置如下:

{
				test: /\.less$/,
				use: [
					'style-loader',
					'css-loader',
					'less-loader'
				]
			}

打包html文件

安装html-webpack-plugin,在webpack配置文件中的plugins中进行如下配置，需要先引入该插件

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
		// 详细的插件配置
		// 默认会创建一个空的html文件，引入打包输出的所有资源
		// template属性指定要复制的html文件，并且自动引入打包输出的全部资源
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],

完成如上配置后，会在输出路径自动生成一个html文件，该文件自动引入打包构建的全部资源并且复制template所指定的html文件的结构

打包图片资源

安装url-loader,file-loader,html-loader并在配置文件中的module中的rules中完成以下配置即可对css和html中的图片资源进行打包

{
				test: /\.(jpg|png|gif)$/,  //默认处理不了html中img的图片资源
				type: 'javascript/auto',
				loader: 'url-loader',
				options: {
					limit: 8 * 1024, //图片小于8kb会被打包成base64格式
					esModule: false, //不使用es6module
					name: '[hash:10].[ext]' //使用10位哈希值命名图片资源，后缀名与源文件一致
				}
			},
			{
				test: /\.html$/,
				loader: 'html-loader' //处理html文件的img图片资源
			}

打包其他资源

webpack5打包字体图标资源无需配置，可直接打包

devServer自动打包

安装webpack-dev-serve
npm i webpack-dev-serve
在配置文件中进行以下配置

// 自动化打包，打开浏览器，刷新页面
	devServer: {
		static: {
			directory: resolve(__dirname, 'build')
		},
		compress: true, //使用gzip压缩
		port: 3000, //服务部署在3000端口
		open: true
	}

执行webpack serve
即可开启服务并自动打开浏览器
这样完成后，修改代码文件后，即可直接自动打包编译，运行，但是其不会将打包结果输出到output，只会在内存中进行打包，所以要生成最终的打包结果，需要运行webpack命令

开发环境基本配置

在项目根目录下完成webpack.config.js即可完成基本环境配置

将css提取成单个样式文件

安装 mini-css-extract-plugin插件
在配置文件中引入该插件
在配置文件的plugins中进行如下配置

new MiniCssExtractPlugin({
	filename: 'css/built.css'
})

在modules的rules中进行如下配置

{
	test: /\.css$/,
	use: [
		MiniCssExtractPlugin.loader,
		'css-loader'
	]
}

css兼容性处理

安装postcss-loader，postcss-preset-env插件
在配置文件中的css配置中进行如下配置
在package.json中配置browserlist字段表面开发和生产环境各自要兼容的浏览器版本

{
	loader: 'postcss-loader',
	options: {
		ident: 'postcss',
		plugins: () => [
			require('postcss-preset-env')()
		]
	}
}

压缩css

安装optimize-css-assets-webpack-plugin插件
在配置文件的plugins中new 一个插件对象即可如下
同样要注意插件要先require引入

plugins: [
	new OptimizeCssAssetsWebpackPlugin()
]

eslint语法检查

安装eslint-loader和eslint和eslint-plugin-import三个插件
在rules中进行如下配置

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'eslint-loader',
	options: {
		fix: true //自动修复语法错误
	}
}

js兼容性处理

安装babel-loader，@babel/core和@babel/preset-env三个插件
在配置文件的rules中进行以下配置

{
	test: /\.js$/,
	loader: 'babel-loader',
	options: {
		presets: [
			[
				'@babel/preset-env',
				{
					useBuiltIns: 'usage', //按需加载
					corejs: {
						version: 3 // 指定corejs版本
					}
				},
				targets: { // 指定兼容哪些浏览器
					chrome: '60',
					firefox: '60',
					ie: '9',
					safari: '10',
					edge: '17'
				}
			]
		]
	}
}

@babel/preset-env只能转换基本的js语法，如promise就不能转换
实现全部兼容性处理需要再安装@babel/polyfill插件,使用时无需配置，只需要在js文件中引入即可，这种情况会带来一个问题就是代码体积太大，他会将所有的兼容性代码全部引入
实现按需加载兼容性处理代码需要安装core-js插件

html和js压缩

js压缩，在生产环境下webpack会自动压缩js代码
html压缩在配置文件的plugins中配置如下代码

plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: { //压缩html代码
				collapseWhitespace: true, //移除空格
				removeComments: true  //移除注释
			}
		})
	]

优化配置

webpack性能优化

HMR： hot module replacement 热模块替换
作用在于一个模块发生变化，只会重新打包只一个模块而不是全部重新打包
只需在devServer配置里设置属性hot: true即可完成
样式文件：可以使用HMR功能其在style-loader内部实现了
js文件：默认没有HMR功能，需要修改js文件，添加支持HMR功能的代码
html文件：默认没有HMR功能，并且同时会导致无法热更新，解决方法是在entry中加入index.html，而html文件其实就一个，所以无需使用HMR功能
source-map
一种提供源代码映射到构建后代码的技术，如果构建后代码出错，可以直接在源代码定位到错误位置，完成该配置，只需在配置文件添加属性 devtool: source-map