webpack从初识到熟练掌握的知识总结

最新推荐文章于 2024-08-21 20:49:33 发布
最新推荐文章于 2024-08-21 20:49:33 发布
阅读量466 收藏 4
点赞数
分类专栏： js webpack 文章标签： js node.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46312220/article/details/108033007
版权

webpack总结

1. webpack简介

1.1webpack是什么

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

1.2webpack的5个核心概念

1. Entry:入口，指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图，可以设置多个入口
2. Output:输出（output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
3. Loader:Loader可以让webpack去处理哪些非js文件（webpack自身只理解js文件和json文件）
4. Plugins:Loader让webpack可以用于执行范围更广的任务，插件的范围包括，打包优化，压缩，重新定义环境中的变量等
5.Mode:模式（Mode）指示webpack以那种模式对前端资源进行打包构建。

模式类型描述特点
development该模式下webpack会将DefinePlugin中process.env.NODE_ENV的值设置为development.并启用NamedChunksPlugin和NamedModulesPlugin。一种能让本地代码调试运行的环境。
production会将DeFinePlugin中的process.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPLugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin:一种能够使代码打包，构建，压缩，优化上线并运行的环境。

2. webpack基本使用介绍

2.1 初始化配置
  1. 初始化package.json，使用指令npm init
  2. 下载并安装webpack,使用指令 npm install webpack webpack-cli -g(全局安装),npm install webpack webpack-cli -D(局部安装)。
2.2 编译打包应用
  1. 创建文件
  2. 运行指令，开发环境使用指令为：webpack src/js/index.js -o build/js/built.js --mode=development。功能为：能够编译打包js和json文件，并且能够将es6的模块化语法转换成浏览器能够识别的语法。生产环境使用指令为：webpack src/js/index.js -o build/js/built.js --mode=production。功能:在开发配置功能上多一个功能，压缩，优化代码。
    注：webpack不能打包css,img等文件，不能将js的es6基本语法转化为es5语法。`

3. webpack开发环境的基本配置

 const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*
项目运行：
webpack:将项目编译打包并输出
webpack-dev-server:只在内存中编译打包，不用输出
*/
module.exports = {
	//入口
	entry: './src/js/index.js',
	//出口
	output: {
		filename: 'js/built.js',
		path: resolve(__dirname,'build')
	},
	module:{
		rules:[
			//loader的配置
			{
				//处理less资源
				test: /\.less$/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			},
			{
				//处理css资源
				test: /\.css$/,
				use:[
					'style-loader',
					'css-loader'
				]
				
			},
			{
				//处理图片资源
				test: /\.(png|jpg|gif)$/,
				loader:'url-loader',
				options:{
					limit: 8 * 1024,
					name: '[hash:10].[ext]',
					//关闭es6模块化
					esModule: false,
					outputPath: 'images'
				}
			},
			//将html文件中的图片资源引入交给url-loader处理
			{
				test: /\.html$/,
				loader: 'html-loader'
			},
			{
				//处理其它资源
				exclude: /\.(html|js|css|less|jpg|png|gif)/,
				loader: 'file-loader',
				options:{
					name: '[hash:10].[ext]',
					outputPath: 'media'
				}
				
			}
			
		]
	},
	//plugins配置
	plugins:[
		//以'./src/index.html'文件为模板生成一个相同的文件，并自动引入webpack打包构建好的所有资源
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],
	mode: 'development',
		AAdevtool: 'inline-source-map',  // 添加打包后代码到源代码的映射，利于调试
		//开发服务器：用来自动化（自动编译，自动打开浏览器,自动刷新浏览器）
		//特定:没有输出,只会在内存中编译打包,
		//启动devServer指令为：npx webpack-dev-server
		devServer:{
			contentBase: resolve(__dirname,'build'),
			//启动gzip压缩
			compress: true,
			//端口号
			port:3000,
			//自动打开浏览器
			open:true
		}
}

4. webpack生产环境的基本配置

4.1提取css成单独的文件
  1. 下载插件mini-css-extract-plugin
  2. 具体配置如下；
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'built.js',
		path: resolve(__dirname, 'build')
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					// 'style-loader',
					//这个loader取代style-loader。作用：提取js中的css成单独的文件
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		new MiniCssExtractPlugin({
			filename:'css/main.css'
		})
	],
	mode: 'development'
}
4.2css样式兼容性处理
  1. 下载loader:npm install --save-dev postcss-loader postcss-preset-env
  2. 配置文件如下：
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//设置node.js环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'built.js',
		path: resolve(__dirname, 'build')
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					// 'style-loader',
					//这个loader取代style-loader。作用：提取js中的css成单独的文件
					MiniCssExtractPlugin.loader,
					'css-loader',
					/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
					帮postcss 找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
					 "browserslist":{
						 //开发环境--》设置node环境变量
						  "development":[
							  "last 1 chrome version",
							  "last 1 firfox version",
							  "last 1 safari version
						  ],
						  //生产环境（默认生产环境）
						  "production":[
							  ">0.2%",
							  "not dead",
							  "not op_mini all"
						  ]
					  }
					  */
					//使用postcss-loader的默认配置
					//'postcss-loader',
					//修改loader配置
					{
						//css的兼容性处理
						loader: 'postcss-loader',
						options:{
							ident: 'postcss',
							plugins: ()=>[
								//postcss的插件
								require('postcss-preset-env')()
							]
						}
					}
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		//将css提取成单独的文件
		new MiniCssExtractPlugin({
			filename:'css/main.css'
		})
		
	],
	mode: 'development'
}
4.3css样式文件的压缩
  1. 安装插件 npm install optimize-css-assets-webpack-plugin
  2. 配置如下
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//设置node.js环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'built.js',
		path: resolve(__dirname, 'build')
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					// 'style-loader',
					//这个loader取代style-loader。作用：提取js中的css成单独的文件
					MiniCssExtractPlugin.loader,
					'css-loader',
					/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
					帮postcss 找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
					 "browserslist":{
						 //开发环境--》设置node环境变量
						  "development":[
							  "last 1 chrome version",
							  "last 1 firfox version",
							  "last 1 safari version
						  ],
						  //生产环境（默认生产环境）
						  "production":[
							  ">0.2%",
							  "not dead",
							  "not op_mini all"
						  ]
					  }
					  */
					//使用postcss-loader的默认配置
					//'postcss-loader',
					//修改loader配置
					{
						loader: 'postcss-loader',
						options:{
							ident: 'postcss',
							plugins: ()=>[
								//postcss的插件
								require('postcss-preset-env')()
							]
						}
					}
				]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		new MiniCssExtractPlugin({
			filename:'css/main.css'
		}),
		//压缩css的插件
		new OptimizeCssAssetsWebpackPlugin()
	],
	mode: 'development'
}
4.4 js语法检查
  1. 下载安装包：npm install --save-dev eslint eslint-loader esling-config-airbnb-base eslint-plugin-import
  2. 修改配置文件
    修改webpack.config.js:
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//设置node.js环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'built.js',
		path: resolve(__dirname, 'build')
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					// 'style-loader',
					//这个loader取代style-loader。作用：提取js中的css成单独的文件
					MiniCssExtractPlugin.loader,
					'css-loader',
					/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
					帮postcss 找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
					 "browserslist":{
						 //开发环境--》设置node环境变量
						  "development":[
							  "last 1 chrome version",
							  "last 1 firfox version",
							  "last 1 safari version
						  ],
						  //生产环境（默认生产环境）
						  "production":[
							  ">0.2%",
							  "not dead",
							  "not op_mini all"
						  ]
					  }
					  */
					//使用postcss-loader的默认配置
					//'postcss-loader',
					//修改loader配置
					{
						loader: 'postcss-loader',
						options:{
							ident: 'postcss',
							plugins: ()=>[
								//postcss的插件
								require('postcss-preset-env')()
							]
						}
					}
				]
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'eslint-loader',
				options:{
					//自动修复eslint错误
					fix:true
				}
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		new MiniCssExtractPlugin({
			filename:'css/main.css'
		}),
		//压缩css的插件
		new OptimizeCssAssetsWebpackPlugin()
	],
	mode: 'development'
}

修改package.json:
“eslintConfig”: {
“extends”: “airbnb-base”,，
env:{
browser:true
}
}

4.5 js兼容性处理

1 . 安装包和插件：npm install babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
2.修改配置文件：

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//设置node.js环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename:'built.js',
		path: resolve(__dirname, 'build')
	},
	module:{
		rules:[
			{
				test: /\.css$/,
				use:[
					// 'style-loader',
					//这个loader取代style-loader。作用：提取js中的css成单独的文件
					MiniCssExtractPlugin.loader,
					'css-loader',
					/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
					帮postcss 找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
					 "browserslist":{
						 //开发环境--》设置node环境变量
						  "development":[
							  "last 1 chrome version",
							  "last 1 firfox version",
							  "last 1 safari version
						  ],
						  //生产环境（默认生产环境）
						  "production":[
							  ">0.2%",
							  "not dead",
							  "not op_mini all"
						  ]
					  }
					  */
					//使用postcss-loader的默认配置
					//'postcss-loader',
					//修改loader配置
					{
						loader: 'postcss-loader',
						options:{
							ident: 'postcss',
							plugins: ()=>[
								//postcss的插件
								require('postcss-preset-env')()
							]
						}
					}
				]
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'eslint-loader',
				options:{
					//自动修复eslint错误
					fix:true
				}
			},
			{
				/*
				js兼容性处理：babel-loader @babel/core 
				1. 基本js 兼容新处理--》@babel/preset-env
				问题：只能转换基本语法，如promise不能转换
				2.全部js兼容性处理--》@babel/polyfill(引入即可)
				问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，代码体积太大
				3.需要做兼容性处理的就做：按需加载,-->core-js
				*/
				test: /\.js$/,
				exclude:/node_modules/,
				loader: 'babel-loader',
				options:{
					presets:[
						[
						'@babel/preset-env',
						{
						useBuiltIns:'usage',
						corejs:{
							version: 3
						},
						targets:{
							chrome: '60',
							firefox: '60',
							ie: '9',
							safari: '10',
							edge: '17'
						},
						},
						]
					],
				}
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html'
		}),
		new MiniCssExtractPlugin({
			filename:'css/main.css'
		}),
		//压缩css的插件
		new OptimizeCssAssetsWebpackPlugin()
	],
	mode: 'development',
	//生产环境下会自动压缩代码
	// mode: 'production'
}
4.6 js文件压缩

将配置文件中的mode修改为production后webpack就会对js文件进行压缩。

4.7 html文件压缩

html文件压缩直接在html-webpack-plugin内部多家一个属性minify,如下：
在这里插入图片描述

4.8 相对完整的生产环境配置如下：
const {resolve} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//定义node.js环境变量,决定使用browserslist的哪个环境
process.env.NODE_ENV = 'development';
let commonCssLoader = {
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
		//还需要再package.json中定义browserslist
		loader: 'postcss',
		options:{
			ident: 'postcss',
			plugins:()=>[
				require('postcss-preset-env')()
			]
		}
	}
}
module.exports = {
	entry:'./src/js/index.js',
	output:{
		filename: 'js/built.js',
		path: resolve(__dirname,'build')
	},
	module:{
		rules:[
			/*
			正常来讲，一个文件只能被一个loader处理,如果一个文件被多个loader处理,则一定注意loader的配置顺序
			先执行eslint再执行babel
			*/
			{
				/\.css$/,
				use:[
					// // 'style-loader',
					// MiniCssExtractPlugin.loader,
					// 'css-loader',
					// {
					// 	//还需要再package.json中定义browserslist
					// 	loader: 'postcss',
					// 	options:{
					// 		ident: 'postcss',
					// 		plugins:()=>[
					// 			require('postcss-preset-env')()
					// 		]
					// 	}
					// }
					...commonCssLoader
				]
			},
			{
				/\.less$/,
				use:[
					// // 'style-loader',
					// MiniCssExtractPlugin.loader,
					// 'css-loader',
					// {
					// 	//还需要再package.json中定义browserslist
					// 	loader: 'postcss',
					// 	options:{
					// 		ident: 'postcss',
					// 		plugins:()=>[
					// 			require('postcss-preset-env')()
					// 		]
					// 	}
					// }
					...commonCssLoader,
					'less-loader'
				]
			},
			{
				//在package.json中要添加eslintConfig配置，来指示eslint做哪些检查-->airbnb规则
				test: /\.js$/,
				exclude:/node_modules/,
				loader:'eslint-loader',
				//优先处理
				enforce: 'pre',
				options:{
					fix: true
				}
			},
			{
				test: /\.js$/,
				exclude:/node_modules/,
				loader:'babel-loader',
				options:{
					presets:[[
						'@babel/preset-env',
						{
							//按需加载
							useBuiltIns: 'usage',
							corejs:{
								version:3
							},
							targets:{
								chrome: '60',
								firefox: '60',
								ie: '9',
								safari: '10',
								edge: '17'
							}
						}
					]]
				}
			},
			{
				test: /\.(png/jpg/gif)$/,
				loader: 'url-loader',
				options:{
					limit: 8*1024,
					name: '[hash:10].[ext]',
					outputPath: 'images',
					esModule: false
				}
			},
			{
				test: /\.html$/,
				loader: 'html-loader'
			},
			{
				exclude: /\.(js|html|css|less|png|jpg|gif)/,
				loader: 'file-loader',
				options:{
					outputPath: 'media',
					name: '[hash:10].[ext]'
				}
			}
		]
	},
	plugins:[
		new MiniCssExtractPlugin({
			filename: 'css/built.css'
		}),
		new OptimizeCssAssetsWebpackPlugin(),
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			minify:{
				collapseWhitespace: true,
				removeComments: true
			}
		})
	]
}

5.webpack优化配置

5.1 热模块替换（HMR）
5.1.1 什么是HMR

HMR指代码更新时不用更新所有的模块只更新部分模块，可以增快构建速度，仅用于开发环境只要在devServer配置中设置hot为true即可。

5.1.2 如何实现HMR
  1. css文件实现HMR：对于css文件的处理需要style-loader,style-loader内部实现了css资源的HMR功能。
  2. html文件实现HMR：对于HTML文件往往比较少，通常只有一个，有无实现HMR功能并不影响。
  3. js文件实现HMR：webpack默认不能实现HMR功能，但是我们可以通过js代码实现一些模块的HMR功能，举例如下：
    在这里插入图片描述
5.2sourceMap
5.2.1 sourceMap是什么

source-map:一种提供源代码到构建后代码映射的技术（如果构建后代码出错了，通过source-map可以定位到源代码中出现的错误）

5.2.2 各种sourceMap的简单介绍和比较

source-map 外部
inline-source-map//内联 更快
hidden-source-map 外部
eval-source-map 内联
nosources-source-map 外部
cheap-source-map 外部
cheap-module-source-map 外部
eval-source-map和inline-source-map的区别：
inline-source-map只会生成一个内联sourceMap，eval-source-map每个文件都会生成一个source-map放在eval()中
内联和外部区别：外部生成了文件，内联没有，内联构建速度会，体积会更大

5.2.2 开发环境下的sourceMap选择

开发环境下的选择应该是速度快，调试更友好的sourceMap
速度方面（eval>inline>cheap…）
eval-cheap-source-map
eval-source-map
调试更友好
source-map
cheap-module-source-map
cheap-source-map
推荐：
eval-source-map
eval-cheap-module-source-map

5.2.2 生产环境下的sourceMap选择

生成环境下，我们会考虑源代码要不要隐藏？调试要不要友好。
由于内联会让代码体积变大，所以生成环境不用内联

如果需要隐藏代码我们推荐使用：
nosources-source-map//全部隐藏
hidden-source-map//只隐藏源代码会提示构建后代码错误

希望调试更友好推荐：
source-map
cheap-module-source-map
cheap-source-map

综合推荐
不需要隐藏：source-map；cheap-module-source-Map ,需要隐藏就考虑nosources-source-map//全部隐藏；hidden-source-map//只隐藏源代码会提示构建后代码错误

5.3 oneOf

提取互不影响的loader到oneOf保证任何一个文件只被oneOf里面的一个loader处理，可以提高打包构建速度。

5.4 缓存
5.4.1 打包时生成的各个hash值，及其区别。
  1. hash: 每一次打包都生成一个唯一的hash值,每次打包都会变。
  2. chunkHash：来自同一个chunk的资源具有相同的hash值，一旦生成这个chunk的源文件中任何一个文件发生变化，再次打包时这个chunkHash的值就会发生变化。
  3. contentHash：根据文件内容生成的hash,一旦文件内容发生改变，那么hash值就会改变
5.5 treeshaking(树摇)

打包构建时去掉无用代码，无用代码包括哪些从未被任何模块引用的模块，未被任何模块使用的代码。

5.6 代码分割（codesplit）

代码分割方式：

  1. 多入口：设置多个入口，每一个入口都会打包成一个chrunk
  2. 配置optimization：它会将node_modules中的资源进行单独打包，并且如果一个模板（大于30kb ）被多个chrunk引用，该模块也会被抽离出来单独进行打包。
  3. 通过es6的import语法：通过使用es6的import语法导入的模块能够被进行单独的打包实现按需加载
5.7 懒加载

前端在需要该资源时才进行该资源的加载解析，实现方式es6的import语法。

5.8 预加载

在浏览器空闲时，预先对某些资源进行加载。

5.9 PWA

实现PWA（渐进式web应用程序）功能，我们需要使用一个插件workbox-webpack-plugin该插件会帮助我们生成serviceWorker,因为该功能存在很大的兼容性问题，故我们要想使用还需添加一些js代码如：
在这里插入图片描述

5.9 多进程打包

webpack中实现多进程打包，我们需要使用thread-loader，使用thread-loader时，启动多线程大概需要600毫秒，线程之间通信也需要时间，在我们的项目比较大时，可以一定程度上提高打包构建速度，如果较小，未必能够加快构建速度，反而更慢。

5.10 externals

我们可以通过添加externals配置指定某些资源不打包，通过外联的方式引入比如通过CDN。如果我们添加如下配置：
在这里插入图片描述
就不会对jQuery进行打包，我们可以通过CDN来使用jQuery。

5.10 dll

通过使用dll,我们可以对某些基本不会变的资源进行单独打包，避免代码更新之后重复打包某些资源

6.webpack配置详情

6.1 entry

entry配置有三种方式，字符串，对象，数组，通常我们使用但入口的字符串形式。

6.2 output
output:{
//文件名称（指定名称+目录）
filename: 'js/[name].js',
//输出文件目录（将来所有资源输出的公共目录）
path: resolve(__dirname,'build),
//所有资源引入公共路径前缀: 'imgs/a.jpg' -->'/imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name]_chunk.js'，//非入口chunk的名称
library: '[name]',//整个库向外暴露的变量名
libraryTarget: 'window',//变量名添加到哪个环境上：browser
libraryTarget: 'global',//变量名添加到哪个环境上：node
libraryTarget: 'commonjs'//将变量名添加到commonjs上

}
6.3 module

module中主要配置处理文件的loader,配置loader的主要字段包括这样一些。

  1. test：通过正则表达式指定需要处理的文件类型
  2. exclude：通过正则表达式指定不需要处理的文件范围
  3. include：通过正则表达式指定指处理的文件范围
  4. enforce：值未pre时优先执行该loader,值未post时延后执行该loader.
  5. loader:：‘cssl-oader’//单个loader用loader，多个loader用use。
  6. optiions：修改loader的默认配置。
6.4 resolve

resolve用于配置模块的一些解析规则

  • 配置模块的的路径别名我们可以使用alias属性，优点是配置以后我们可以简写路径，但是没有提示。如：
    在这里插入图片描述
  • 配置省略文件路径的后缀名我们可以使用 extensions。如下：
    在这里插入图片描述
  • 告诉webpack从哪个目录开始解析模块我们可以使用modules属性。如下：
    在这里插入图片描述
6.4 devServer

devServer详细配置如下

devServer：{
//运行代码的目录
contentBase: resolve(__dirname,'build'),
//监视contentBase目录下的所有的文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions:{
//忽略文件
ignored: /node_modules/
},
//启动gzip压缩
compress: true,
//端口号
port: 8000,
//域名
host: localhost,
//自动打开浏览器
open: true,
//开启HMR功能
hot: true,
//不要显示服务器日志信息
clientLogLevel: 'none',
//除了一些基本启动信息以外，其他内容都不显示
quite: true,
//如果出错了，不要全屏显示
overlay: false,
//服务器代理,解决开发环境跨域问题。
proxy:{
//一旦devServer(8000)服务器接收到/api/xxx的请求，就会把请求转发到另外一个服务器（3000）
'/api':{
target: 'http://localhost:3000',
//发起请求时请求路径重写：将/api/xxx -->/xxx(去掉/api)
pathRewrite: {
'^/api': ''
}
}
}
}
6.4 optimization
optimization{
splitChunks:{
chunks: 'all',
//以下取值均为默认值可以不写
minSize: 30*1024,//分割的chunk的最小为30kb
maxSize: 0,//没有最大限制
minChunks: 1,//要提取的chunk最少被引用一次
maxAsyncRequests: 5,//按需加载时并行加载的文件的最大数量
maxInitialRequests: 3,//入口js文件最大并行请求数量
automaticNameDelimiter: '~',//名称连接符
name: true,//可以使用命名规则
cacheGroups: {
//分割chunk的组
//node_modules文件会被打包到wendors组的chunk中。-->vendors~xxx.js
//满足上面的公共规则，如：大小超过30kb,至少被引用一次
vendors:{
test: /[\\/]node_modules[\\/]/,
//优先级
priority: -10
},
default:{
//要提取的chunk最少被引用两次
minChunks: 2,
//优先级
priority: -20,
//如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}
},
//将当前模块的记录其他模块的hash单独打包为一个文件 runtime
//解决修改a文件导致b文件的contenthash发生变化
runtimeChunk:{
name: entrypoint=> `runtime-$(entrypoint.name)`
},
minimizer:[
//配置生产环境的压缩方案：js和css
new TerserWebpackPlugin({
//开启缓存
cache: true,
//开启多进程打包
parallel: true,
//启动source-map
sourceMap: true
})
]
}
qq_46312220
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端自动化构建工具：Webpack（一）—— 初步认识 Webpack
前端工程师
03-07 892
对于每一个前端开发工程师来说，Webpack 无疑是最难啃的骨头之一。Webpack是前端最主流的自动化构建工具，很多前端框架（Vue、React等）都依赖于Webpack 进行搭建。然而，相比于熟悉Gulp，熟悉 Webpack 的成本高了很多。因为 Webpack 本身不仅多了很多概念需要去理解，也有许多不得不掌握的优化配置。 在去年10月份，Webpack5 正式发布，它主要是围绕优化进行升级。Webpack5 和 Webpack4 在使用的过程中会有一些小差异，但由于很多团队依旧在使用旧的 We.
webpack超详细教程，学webpack看这一篇就够了！（上）
共同学习，共同成长
05-02 4988
​本文将以基础到进阶的形式详细讲解webpack，包括【webpack基本概念和作用】【使用步骤】【打包、编译和压缩等相关配置】【使用webpack开发服务器】等等，由浅入深，通俗易懂，需要的小伙伴点个关注收藏一下吧！
【章节4】原项目升级到webpack5并进行配置优化全流程
纸飞机博客
06-03 1741
以升了wepack5 再 做commit 预处理的方案，也可以先commit 预处理 再来 升webpack5，我这是后者。基础工程：https://gitee.com/huqinggui/webpack5_base.gitclone 下来后需要切换到webpack4-d2分支项目体积越大越能看见差异，最好是编译几分钟以上的项目，如果是1分钟以内的就没必要升级webpack5了（需要用到webpack5联邦模块的例外），我这个工程我大概构建速度20s，代码量几乎没有。
一文掌握Webpack编译流程
chern1992的博客
06-18 3735
本文概要 Webpack事件流机制 Webpack流程概览 Webpack流程图示 Webpack流程详解 Webpack执行流程源码分析 Webpack事件流机制 Webpack是基于事件流的插件集合，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，Tapable是一个类似Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅，控制着webpack的插件系统。Webpack中最核心的负责编译的Compile
熟悉webpack
m0_46202781的博客
02-20 105
首先，了解一下webpack是什么 webpack是一中前端资源构造工具，一个静态模块打包器 webpack的五个核心概念 1、entry（入口），以那个文件作为起点开始打包 2、output（出口），输出知识webpack打包后的资源，bundles输出到哪去，以及命名 3、module中的loader，让webpack能够去处理那些非JavaScript文件（让webpack自身只理解JavaScript） 4、plugin（插件），可以用于执行范围更广的任务。包括从打包优化和压缩，
webpack知识点总结
ass_ace
08-05 755
webpack是什么？ webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。 webpack与gulp的区别是什么？ webpack与gulp最大的区别就是在于打包过程上有所不同 Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件–>匹配规则–>打包，整个过程是基于文件流的打包方式且做不到按需加载。 webpack 是从入口文件开始，把相关模块引入通过加载模块–&
webpack一些基础知识点
qq_41379824的博客
06-24 401
webpack是对jacascript打包的工具，不能识别其他的文件，所以需要配置loader进行识别 1. 第一步初始化项目 2. 第二步安装webpack三件套 3. 创建配置文件，分功能创建 3.1 创建src文件夹，并在里面创建main.js文件 3.2书写入口路径和输出路径 4 创建环境文件 4.1 书写环境内容 4.2 配置环境变量 4.3 修改package.json启动命令 cross-env：运行跨平台设置和使用环境变量的脚本 –config：使用哪个配置文件 –colo
webpack3升级到webpack4遇到问题总结
10-16
在将项目从webpack3升级到webpack4的过程中，开发者可能会遇到一系列问题。以下是对这些问题的详细解释及相应的解决方案。 1. **移除`CommonsChunkPlugin`** Webpack4已经移除了`CommonsChunkPlugin`，现在需要...
Webpack：知识点总结以及遇到问题的处理办法
01-08
官方文档：1.webpack概述：2.webpack的基本使用：3.在项目中安装和配置 webpack：4.配置自定义打包的自定义入口和出口：4.配置自动打包功能：5.配置生成预览页面功能：6.配置自动打包相关参数：7.webpack 中的加载器...
Webpack 从零入门到工程化实战.rar
12-29
在“Webpack 从零入门到工程化实战”中，你将学习到以下关键知识点： 1. **Webpack 基本概念**： - **Entry（入口）**：Webpack 构建的起点，定义了项目中的主文件。 - **Output（输出）**：配置构建后的文件路径...
webpack:初识webpack
04-30
初识webpack ##学习重点 学习webpack配置 学习webpack各种属性，插件用法 学习React 学习地址 npm run dev执行命令里面的配置信息 webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器 --devtool eval - 为...
从基础到实战 手把手带你掌握新版Webpack
09-23
从基础到实战 手把手带你掌握新版Webpack Webpack 目前无论在求职还是工作中，使用越来越普及。而想要学懂，学会Webpack更绝非易事。本课程完整讲清最新版本下的 Webpack知识体系，通过 基础 + 实例 + 原理代码编写 ...
当下流行的打包工具Webpack从入门到熟练系统学习教程（一）
编程教培一线讲师
04-17 1162
我将分五次把Webpack学习总结清楚 这一节讲解Webpack的一些基础概念 学习Webpack之前需要有一定的npm基础知识 一、什么是Webpack Webpack 是一个前端资源构建工具，静态模块打包器。它将所有资源文件（js/css/images/html）模块化处理并进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 二、五个核心概念 Entry 入口(Entry)指示Webpack以哪个文件为入口开始打包，分析构建内部依赖图 Output 输出（Output）指示Webpac.
webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程
ztK63LrD的博客
10-23 3882
根据上文webpack是有默认打包的入口与出口路径文件的，如果想修改的话，看如下操作：在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。// 导入路径模块// 使用 node.js 语法向外导出一个 webpack 的配置对象// 代表webpack运行模式,可选值:开发模式(development)和生产模式(production)// entry:'指定要处理的文件路径'// output:指定生成的文件要存放到哪里output:{// 存放目录。
15K的前端应届毕业生，就因为掌握了这些知识点！（前端企业级开发必备）
热门推荐
孙叫兽的博客
10-24 2万+
目录 1.前端开发 下载安装VScode 优化配置 2、插件安装 3、设置字体大小 4、开启完整的Emmet语法支持 5、视图 2.Node.js 入门 2.1、什么是Node.js 2.2、Node.js有什么用 2.3、安装 下载： 2.4、快速入门 2.5、服务器端应用开发 3、ES6入门 3.2、let声明变量 3.3、const声明常量 3.4、解构赋值 创建 3.5、模板字符串 创建 3.6、声明对象简写 创建 3.7、定义方法简写 3.8、对象拓展
webpack定制化 环境配置[开发环境、生产环境、前后端半分离环境]
黑日里不灭的light
09-03 876
前提：webpack5及其对应配套内容下文环境，已经配置好了的，一定先阅读README.md，，
一看就会的保姆级webpack配置介绍
weixin_48357279的博客
05-02 1846
webpack基本介绍 webpack官网 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
1分钟熟悉webpack
weixin_34082177的博客
10-25 194
　　随着业务发展和前端人员的增加，搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面，一开始好像就没考虑其他框架，直接选了webpack。webpack的优点就不多说了，可扩展性，强大的npm插件库，说干就干。 　　基于公司基础以及业务限制，一口吃不成个胖子，没办法做成最理想的状态，也就是一份配置文件，npm build可以直接打...
Node.js 安装教程
最新发布
weixin_58462329的博客
08-21 234
在官方网站首页，你会看到两个版本的下载链接：LTS（长期支持版）和 Current（最新版）。首先，访问 Homebrew 官方网站，这是 macOS 上的一个包管理器，可以方便地安装各种软件。点击对应的下载链接，下载 Windows 安装包（.msi 文件）。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。首先，打开浏览器，访问 Node.js 官方网站。
Webpack中文手册：从入门到实践指南
Webpack中文手册是一份详尽的文档，详细介绍Webpack这款流行的前端模块打包工具的工作原理、配置和用法。Webpack允许开发者将各种资源...通过学习和实践，你可以熟练掌握Webpack工具，提升前端项目的构建效率和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值