webpack01-简单的处理及配置

其他 2021-10-08 10:19:22 阅读次数: 0

1.webpack简介

简介：分析项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（scss，typescript等），并将其打包为合适的格式以供浏览器使用。
理解：webpack可以看做模块打包机，功能是通过入口将所有的依赖关系通过webpack打包器打包所有的静态资源
可以做的事：代码转换（es6->es5，less/scss->css）、文件优化（压缩代码体积、合并文件等）、代码分割（多页面应用中公共模块的抽离、路由懒加载）、模块合并（多个模块合并成一个模块按照功能进行分类）、自动刷新（webpack开发中会自己启动一个本地服务实现代码变更后更新页面包括热更新等）、代码校验、自动发布（打包之后发布服务器）

2.webpack安装/配置/打包

安装

  • 安装前在相应文件夹下初始化：npm init -y
  • 安装俩包（webpack4中需要webpack、webpack-cli）：npm add webpack webpack-cli -D
    -D开发依赖表示上线的时候不需要

配置

webpack可以进行0配置

  • 打包工具->输出后的结果（js模块）
    打包命令（5.2支持的）：npx webpack
    打包命令执行：默认找node-modules->bin->webpack.cmd
    webpack.cmd中
    判断若当前目录下有node.exe，用当前文件夹下的node.exe执行文件；没有执行else语法用node执行当前目录下的上一级即node-modules里（…\webpack\bin\webpack.js）用webpack-cli
    生成一个dist文件

手动配置webpack

  • 默认配置文件的名字：webpack.config.js
    webpack.config.js：node-modules默认运行（解析module.exports对象）webpack->webpack-cli->bin->config-yargs.js里defaultDescription默认名字两种（webpack.config.js or webpackfile.js）
  • webpack 是node写出来的 采用node的写法
  • 之后打包命令：npx webpack
webpack.config.js:
let path =required('path');
module.exports={
    
    
	mode:'development'.//模式 默认两种 production生产模式 development开发模式
	entry:'./src/index',//入口（写路径）
	output:{
    
    //出口
		filename:'bundle.js',//打包后的文件名
		path:path.resolve（__dirname'dist'）,//路径必须是一个绝对路径（resolve可以把相对路径解析为绝对路径,__dirname是以当前目录下产生一个dist目录）
	}
}

3.webpack打包结果解析及webpack.config.js名字修改

打包结果解析链接

名字修改

方法一：

  • 修改名字（webpack.config.my.js）
  • 执行打包命令（手动指定名字）：npx webpack --config webpack.config.my.js

方法二：

  • 在package.json里配置脚本
"script":{
    
    
	"build":"webpack --config webpack.config.my.js"
}
  • 执行打包命令：npm run build
  • 或执行：npm run build – --config webpack.config.my.js

4.开发服务、html插件

开发服务：locallhost/ip地址方式访问

  • 执行命令：npm add webpack-dev-server -D
    npx webpack-dev-server
    配置脚本：
"script":{
    
    
	"build":"webpack --config webpack.config.my.js",
	"dev":"webpack-dev-server"
}
  • 配置
webpack.config.js:
let path =required('path');
module.exports={
    
    
	devServer:{
    
    //开发服务器的配置
		port:3000,//端口号（可以改）
		progress:true,//打包进度条
		contentBase:'./bulid',//build文件目录作为静态服务
		compress:true,//压缩
	},
	mode:'development'.//模式 默认两种 production生产模式 development开发模式
	entry:'./src/index',//入口（写路径）
	output:{
    
    //出口
		filename:'bundle.js',//打包后的文件名
		path:path.resolve（__dirname'dist'）,//路径必须是一个绝对路径（resolve可以把相对路径解析为绝对路径,__dirname是以当前目录下产生一个dist目录）
	}
}
  • 执行命令：npm run dev

html插件

  • 配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
    
    
	devServer:{
    
    
		port:3000,
		progress:true,
		contentBase:'./bulid',
		compress:true,
	},
	mode:'development'.
	entry:'./src/index',
	output:{
    
    
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',//每次更改后的打包文件重命名 :5只显示五位
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',//以index.html作为模板
			filename:'index.html',//打包后的文件名
			minify:{
    
    //压缩
				removeAttributeQuotes:true,//删除文件的双引号
				collapseWhitespace:true,//折叠变成一行
				
			},
			hash:true,//缓存 hash戳
		})
	]
}
  • 安装命令：npm add html-webpack-plugin -D
  • 执行命令：npm run dev
  • 打包：npm run build

5.css模块、样式处理

css模块

  • css引入

js里
require('./index.css');
require('./index.less')

  • 配置：
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
    
    
	mode:'development',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		})
	],
	module:{
    
    //模块
		rules:[//规则 css-loader解析@import这种语法
			//style-loader把css插入head的标签中
			//loader特点：希望单一
			//loader用法：1.字符串表示只用一个loader
			//2.多个loader需要[]
			//loader的顺序 默认从右向左执行 从下到上执行
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},//test:找到以css结尾的文件 use:先处理css再插入style标签中
			//3.loader还可以写成对象形式 可以传参 从下到上执行
			//从下到上css样式覆盖
			{
    
    
				test:/\.css$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    //选项传参
							insertAt:'top',//style标签插到上面	
						}
					},
					'css-loader',//解析@import这种语法
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    //选项传参
							insertAt:'top',//style标签插到上面	
						}
					},
					'css-loader',//解析@import 解析路径
					'less-loader',//把less->css
					]},
		]
	}
}
  • 安装（安装cssloader和styleloader）：npm add css-loader style-losder -D
  • 安装（安装less）：npm add less less-loader -D
  • 执行：npm run dev

抽离css样式插件

  • 安装插件：npm add mini-css-extract-plugin -D
    注：使用mini-css-extract-plugin需要自己优化压缩
    配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')//引入插件
module.exports={
    
    
	mode:'development',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',//抽离出的插件名
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,//抽离一个文件 名是main.css
					'css-loader',//解析@import这种语法
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 执行命令：npm run build

加浏览器前缀

  • 安装插件：npm add postcss-loader autoprefixer -D
    配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')//引入加前缀插件
module.exports={
    
    
	mode:'development',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',//加浏览器前缀
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 建postcss.config.js文件
    配置
module.exports={
    
    //导出模块
	plugins:[require('autoprefixer')]//插件
}
  • 执行命令：npm run build
    浏览器前缀

css资源优化压缩

  • css安装插件：npm add optimize-css-assets-webpack-plugin -D
  • js安装插件：npm add uglifyjs-webpack-plugin -D
    配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')//引入css插件
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[//使用插件
			new UglifyJsPlugin(),//默认
			2.new UglifyJsPlugin({
    
    
				cache:true,//缓存
				parallel：true,//并发打包
				sourceMap：true,//源码映射 例如:es6->es5
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 执行命令：npm run build

6、js配置 转化es6语法（babel）

es6->es5

  • 安装babel：npm add babel-loader @babel/core @babel/preset-env -D
    @babel/preset-env用于转化所有js语法

配置

webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //babel配置
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    //用babel-loader 需要把es6->es5					
						presets:[//映射
							'@babel/preset-env'
						]
					}
				}
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 命令：npx webpack
  • 命令：npm run dev

es7

class A{
    
    //new A() a=1 给A实例添加a=1
	a=1;
}
let a=new A();
console.log(a.a);//1
  • 添加类的插件：npm add @babel/plugin-proposal-class-properties -D
    配置插件：
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //babel配置
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[//配置class插件
							'@babel/plugin-proposal-class-properties'
						]
					}
				}
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 执行命令：npm run dev

7、js语法及校验

处理js语法

  • 安装插件：npm add @babel/plugin-transform-runtime -D
  • 安装：npm add @babel/runtime
    配置插件：
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //babel配置
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'//配置插件
						]
					}
				},
				include:path.resolve(__dirname,'src'),//找dirname下的src
				exclude:/node_modules/,//排除node-modules下的js文件
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 打包：npx webpack

js校验

eslint校验

  • 安装ealint:npm add eslint eslint-loader
    配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //ealint校验
				test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',//previous强制在前面执行、post强制在后面执行 
					//loader默认从右到左从下到上执行，pre强制让ealint-loader在babel-loader之前执行
					}
				},
			}
			{
    
    //babel配置
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 下载.ealintrc.son文件放在根目录的配置文件里
    下载文件
  • 执行命令：npx webpack

8、webpack底层模块使用、全局变量引入

  • 安装jquery：npm add jquery
  • 安装：npm add expose-loader

index.js里
import $ from ‘jquery’;
//expose-loader 暴露全局的loader 内联的loader
//pre 前面执行的loader normal普通loader 内联loader post后置loader
console.log(window.$);

配置 jquery暴露出$符

webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //jquery暴露出$符
				text:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
    
    
			 	test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',
					}
				},
			}
			{
    
    //babel配置
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}
  • 执行：npm run dev
  • 引入第三方模块三种方法：

链接:https://www.bilibili.com/video/BV1a4411e7Bz?p=9&spm_id_from=pageDriver中9、全局变量引入问题
1>expose-loader 暴露到window上
2>providePlugin 给每个人提供一个$
3>引入不打包

9、webpack图片引入、打包

  • webpack打包图片：

0，通常使用图片

限制：limit当图片小于多少k的时候用base64转化

  • 安装：npm add url-loader -D
  • 配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //图片
				 test:/\.(png|jpg|gif)$/,
				 //做一个限制 当图片小于多少k的时候用base64转化
				 //否则用file-loader产生真实的图片
				 use:{
    
    
				 	loader:'url-loader',
				 	options:{
    
    
				 	limit:200*1024,//图片小于200k变成base64否则用file-loader产生真实的图片
				 }
			}
			{
    
    
				test:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
    
    
			 	test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',
					}
				},
			}
			{
    
    
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}

1，在js中创建图片来引入

file-loader默认会在内部生产一张图片，到build目录下
把生成的图片的名字返回回来

import logo from './logo.png';//把图片引入，返回的结果是一个新的图片地址
let image = new Image();
image.src='logo';

安装插件：npm add file-loader -D
配置

webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //js图片
				 test:/\.(png|jpg|gif)$/,
				 use:'file-loader'
			}
			{
    
    
				test:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
    
    
			 	test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',
					}
				},
			}
			{
    
    
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}

2，在css引入background（‘url’）

3，< img src=" " alt=" "/>

  • 安装：npm add html-withimg-loader -D
    配置
webpack.config.js:
let path =required('path');
let HtmlWebpackPlugin =require('html-webpack-plugin')
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
let OptimizeCss=require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin =require('uglifyjs-webpack-plugin')
module.exports={
    
    
	optimization:{
    
    //优化项
		minimizer:[
			new UglifyJsPlugin(),
			2.new UglifyJsPlugin({
    
    
				cache:true,
				parallel：true,
				sourceMap：true,
			}),
			new optimizeCss()
		]
	},
	mode:'production',
	entry:'./src/index',
	output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname'dist'）,
	},
	plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'main.css',
		})
	],
	module:{
    
    //模块
		rules:[//规则
			{
    
    //html图片
				 test:/\.html$/,
				 use:'html-withimg-loader'
			}
			{
    
    
				 test:/\.(png|jpg|gif)$/,
				 use:'file-loader'
			}
			{
    
    
				test:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
    
    
			 	test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',
					}
				},
			}
			{
    
    
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}

10.打包分类

图片分类

  • 配置
webpack.config.js:
	module:{
    
    //模块
		rules:[//规则
			{
    
    //图片
				 test:/\.(png|jpg|gif)$/,
				 //做一个限制 当图片小于多少k的时候用base64转化
				 //否则用file-loader产生真实的图片
				 use:{
    
    
				 	loader:'url-loader',
				 	options:{
    
    
				 	limit:200*1024,//图片小于200k变成base64否则用file-loader产生真实的图片
				 	//输出路径
				 	outputPath:'/img/',//输出图片路径文件夹名img
				 }
			}
			{
    
    
				test:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
    
    
			 	test:/\.js$/,
				use:{
    
    
					loader:'ealint-loader', 
					options:{
    
     
						enforce:'pre',
					}
				},
			}
			{
    
    
				test:/\.js$/,
				use:{
    
    
					loader:'babel-loader',
					options:{
    
    
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{
    
    test:/\.css$/,use:['style-loader','css-loader']},
			{
    
    
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
    
    
				//处理less文件
				test:/\.less$/,
				use:[
					{
    
    
						loader:'style-loader',
						options:{
    
    
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}

样式分类

配置

webpack.config.js
plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
    
    
			template:'./src/index.html',
			filename:'index.html',
			minify:{
    
    //压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
    
    
			filename:'css/main.css',//样式分类文件名css
		})
	],

域名下的文件(CDN)

域名+路径 eg：http://www.yuming.cn/img/img.png
http://www.yuming.cn/css/main.css
配置

webpack.config.js
output:{
    
    //出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname,'dist'）,
		publicPath:'http://www.yuming.cn'//域名
	},

域名单独处理图片或css

eg:单独处理图片

webpack.config.js
{
    
    //图片
				 test:/\.(png|jpg|gif)$/,
				 use:{
    
    
				 	loader:'url-loader',
				 	options:{
    
    
				 	limit:200*1024,
				 	outputPath:'/img/',
				 	publicPath:'http://www.yuming.cn',//域名
				 }
			}

猜你喜欢

转载自blog.csdn.net/weixin_55572171/article/details/118861471
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022