webpack-----从入门到精通（四）

其他 2020-03-29 11:33:59 阅读次数: 0

从 webpack-----从入门到精通（一）我们知道了webpack的基本配置的相关信息，

从 webpack-----从入门到精通（二）我们知道了plugins 的使用，让用户不用去处理一些简单而有鼓噪的东西

从 webpack-----从入门到精通（三）我们了解 devserver  的方便，热更新以及模式 mode 的切换

而今天我们来学习webpack的其他配置 --- module

1.module

这个module有什么用呢，它可以让我们把webpack里的模块通过配置，定义的规则 变成我们想要的东西，因为webpack只知道JS文件，其他的如 less，sass,es6，等等其他的文件那就无法识别，所以就需要我们去定义规则 让webpack可以识别去编译对应的文件让他生成浏览器可以识别的html,css,js，而想要编译打包这些文件就需要借助loader, 官方的介绍也是这样

现在我们就来试试从样式开始 ，从之前的配置我们可以看到 我们没有样式CSS，那要什么引入呢 这里就是要通过import来注入对应的样式，不过之前我们也说过，webpack只识别JS文件，所以为了让webpack可以正确的编译CSS，我们需要两个插件

style-loader   //把处理完的css放到style标签里
css-loader     //处理css

第一步都是老规矩了 注入依赖

npm i style-loader css-loader -D

添加CSS文件，并写上样式 

在webpack.config.js配置解析CSS文件 

module: {
		rules: [{
			test: /\.css$/, //以点开始css结尾的文件
			use: ['style-loader', 'css-loader'] //顺序不能搞错
		}]
	},

从webpack(一)知道入口文件在entry指定的文件里，在入口文件引入样式，路径对应自己创建的CSS文件路径

import '../css/index.css';

最后我们只需一下 npm run dev 就会看见 我们写的样式会被编译在html文件里面了

这里我们会发现webpack把所有的CSS都直接引入到头部了，如果样式少的话那还可以，但如果多了话 会造成加载缓慢。样式冲突，命名重叠等问题，这样我们可以使用 mini-css-extract-plugin 它将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载。目前只有在webpack V4版本才支持使用该插件

引入插件 mini-css-extract-plugin

npm i mini-css-extract-plugin -D

在webpack.config.js配置 ，

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

在plugin 写入  ,要在生成html之前 不然不会生效

plugins: [

		new MiniCssExtractPlugin({
			filename: 'css/index.css' //文件目录会放入output.path里
		}),
	],

 修改之前的module

module: {
		rules: [{
			test: /\.css$/,
			use: [MiniCssExtractPlugin.loader, "css-loader"] //代替style-loader
		}]
	},

完整的代码

const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin'); //引入清除文件插件
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		// two: ['./js/two.js', ],
	}, //入口文件为main.js  
	output: { //输出
		path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
		// filename: 'bundle.js' ,//输出的文件名
		filename: '[name].bundle.js' //可以以name/id/hash放在中括号里区分文件名
	},
	plugins: [

		new CleanWebpackPlugin(), //位置放在最上面，作用是先删除dist目录再创建新的dist目录。参数在npm官网上有 默认会去清除output.path里的路径，webpack的output.path目录中的所有文件将被删除一次，但是目录本身不会被删除
		new MiniCssExtractPlugin({
			filename: 'css/index.css' //文件目录会放入output.path里
		}),
		new HtmlWebpackPlugin({
			title: '陈小白',
			/*这个值对应html里的title值 配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值， <title><%= htmlWebpackPlugin.options.title %></title>*/
			// template: path.join(__dirname, 'default_index.ejs'), //模板文件地址。可以自定义模板
			filename: 'index.html', //文件名，默认为index.html（路径相对于output.path的值）   还可以为输出文件指定目录位置（例如'html/index.html'）
			hash: false, //true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
			/* 
			 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
			 chunks: 'all', 所有的都引入
			 chunks: ['one'],  引入对应的JS 如果有多个相同的  可以通过 entry的 key : array 引入 如 
			 entry: {
			 	one: './js/index.js',
			 	two: ['./js/index.js', './js/two.js', ],
			 },
			 */
			chunks: 'all',
			excludeChunks: [], //这个与chunks配置项正好相反，用来配置不允许注入的thunk。 			
			xhtml: false, //true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
			inject: true, //向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同 1、true或者body：所有JavaScript资源插入到body元素的底部 2、head: 所有JavaScript资源插入到head元素中 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
			minify: { //html-webpack-plugin内部集成了html-minifier
				collapseWhitespace: true, //压缩空格
				removeAttributeQuotes: true, //移除引号
				removeComments: true, //移除注释
			},
		}),
		new webpack.HotModuleReplacementPlugin(), //引入热更新插件
		
	],
	devServer: {
		open: true, //自动打开
		// host: '0.0.0.0',
		port: 8080, //端口
		// contentBase: path.join(__dirname, "dist"), //指向资源函数  默认是指向配置dist文件
		headers: {
			'token': '2121'
		}, //请求头
		historyApiFallback: true,
		hot: true, // DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的， 开启模块热替换功能后，它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的 在package.json 配置 --hot 或者引入webpack的HotModuleReplacementPlugin热更新
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: [MiniCssExtractPlugin.loader, "css-loader"] //代替style-loader
		}]
	},
}

 执行一下 npm run build会发现在dist会生成一个新的css文件，而我们的HMLT也增加了新的LINK标签

更多配置 https://github.com/webpack-contrib/mini-css-extract-plugin 去GitHub上查看

二.图片的处理

上面处理CSS用到了插件，所以处理图片我们也要用到插件 这次我们用的是 

file-loader   //解析地址
url-loader    //把图片地址解析成base64

老规矩 引入

npm i file-loader url-loader -D

在webpack.config.js的module配置规则编译

module: {
		rules: [
			{
				test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多个
				use: {
					"loader" : 'file-loader',
					options : {
						outputPath : 'img/', //会在dist文件生成对应的图片文件夹
					}
				}
			},
		]
	},

完整的配置

const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin'); //引入清除文件插件
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		// two: ['./js/two.js', ],
	}, //入口文件为main.js  
	output: { //输出
		path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
		// filename: 'bundle.js' ,//输出的文件名
		filename: '[name].bundle.js' //可以以name/id/hash放在中括号里区分文件名
	},
	plugins: [

		new CleanWebpackPlugin(), //位置放在最上面，作用是先删除dist目录再创建新的dist目录。参数在npm官网上有 默认会去清除output.path里的路径，webpack的output.path目录中的所有文件将被删除一次，但是目录本身不会被删除
		new MiniCssExtractPlugin({
			// filename: 'css/index.css' ,//文件目录会放入output.path里
			filename: 'css/[name].css',
		}),
		new webpack.HotModuleReplacementPlugin(), //引入热更新插件
		new HtmlWebpackPlugin({
			title: '陈小白',
			/*这个值对应html里的title值 配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值， <title><%= htmlWebpackPlugin.options.title %></title>*/
			// template: path.join(__dirname, 'default_index.ejs'), //模板文件地址。可以自定义模板
			filename: 'index.html', //文件名，默认为index.html（路径相对于output.path的值）   还可以为输出文件指定目录位置（例如'html/index.html'）
			hash: false, //true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
			/* 
			 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
			 chunks: 'all', 所有的都引入
			 chunks: ['one'],  引入对应的JS 如果有多个相同的  可以通过 entry的 key : array 引入 如 
			 entry: {
			 	one: './js/index.js',
			 	two: ['./js/index.js', './js/two.js', ],
			 },
			 */
			chunks: 'all',
			excludeChunks: [], //这个与chunks配置项正好相反，用来配置不允许注入的thunk。 			
			xhtml: false, //true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
			inject: true, //向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同 1、true或者body：所有JavaScript资源插入到body元素的底部 2、head: 所有JavaScript资源插入到head元素中 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
			minify: { //html-webpack-plugin内部集成了html-minifier
				collapseWhitespace: true, //压缩空格
				removeAttributeQuotes: true, //移除引号
				removeComments: true, //移除注释
			},
		}),
		

	],
	devServer: {
		open: true, //自动打开
		// host: '0.0.0.0',
		port: 8080, //端口
		// contentBase: path.join(__dirname, "dist"), //指向资源函数  默认是指向配置dist文件
		headers: {
			'token': '2121'
		}, //请求头
		historyApiFallback: true,
		hot: true, // DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的， 开启模块热替换功能后，它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的 在package.json 配置 --hot 或者引入webpack的HotModuleReplacementPlugin热更新
	},
	module: {
		rules: [{
				test: /\.css$/, //以点开始css结尾的文件
				use: [
					//这是一个loader，如果loader需要给参数，就写成对象的形式
					{
						loader: MiniCssExtractPlugin.loader, //loader是哪个
						options: { //所有的配置参数都要放在这个对象里面
							publicPath: '../' //这个表示在css文件里但凡用到地址的地方在其前面加个目录'../'，这个是为了能找到图片
						}
					},
					'css-loader' //这个loader没有其它选项就直接写
				]
			},
			{
				test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多个
				use: {
					"loader" : 'file-loader',
					options : {
						outputPath : 'img/', //会在dist文件生成对应的图片文件夹
					}
				}
			},
		]
	},
}

我们执行一下npm run build 会看见在dist文件夹生成一个 img的文件夹  里面放着对应的图片

 

一些相关的配置，更多配置去webpack官网插件查看 file-loader

 

 用了file-loader，我们还有一个url-loader，这个的话 就可以把对于的图片转换成base64图片，因为在前几步我们已经引入了。所以这里我们直接引用

在module 写对于的loader

module: {
		rules: [
		
			/* 转换图片的 
			url-loader */
			{
				test: /\.(jpg|png|gif)$/,
				//use:['file-loader']
				use: [{
					loader: 'url-loader', //把图片转成base64
					options: {
						limit: 50 * 1024, //小于50k就会转成base64
						outputPath: 'img'
					}
				}]
			}
		]
	},
const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin'); //引入清除文件插件
module.exports = {
	// entry: ['./js/index.js', './js/two.js', ],
	entry: {
		one: './js/index.js',
		// two: ['./js/two.js', ],
	}, //入口文件为main.js  
	output: { //输出
		path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
		// filename: 'bundle.js' ,//输出的文件名
		filename: '[name].bundle.js' //可以以name/id/hash放在中括号里区分文件名
	},
	plugins: [

		new CleanWebpackPlugin(), //位置放在最上面，作用是先删除dist目录再创建新的dist目录。参数在npm官网上有 默认会去清除output.path里的路径，webpack的output.path目录中的所有文件将被删除一次，但是目录本身不会被删除
		new MiniCssExtractPlugin({
			// filename: 'css/index.css' ,//文件目录会放入output.path里
			filename: 'css/[name].css',
		}),
		new webpack.HotModuleReplacementPlugin(), //引入热更新插件
		new HtmlWebpackPlugin({
			title: '陈小白',
			/*这个值对应html里的title值 配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值， <title><%= htmlWebpackPlugin.options.title %></title>*/
			// template: path.join(__dirname, 'default_index.ejs'), //模板文件地址。可以自定义模板
			filename: 'index.html', //文件名，默认为index.html（路径相对于output.path的值）   还可以为输出文件指定目录位置（例如'html/index.html'）
			hash: false, //true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
			/* 
			 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
			 chunks: 'all', 所有的都引入
			 chunks: ['one'],  引入对应的JS 如果有多个相同的  可以通过 entry的 key : array 引入 如 
			 entry: {
			 	one: './js/index.js',
			 	two: ['./js/index.js', './js/two.js', ],
			 },
			 */
			chunks: 'all',
			excludeChunks: [], //这个与chunks配置项正好相反，用来配置不允许注入的thunk。 			
			xhtml: false, //true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签
			inject: true, //向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同 1、true或者body：所有JavaScript资源插入到body元素的底部 2、head: 所有JavaScript资源插入到head元素中 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
			minify: { //html-webpack-plugin内部集成了html-minifier
				collapseWhitespace: true, //压缩空格
				removeAttributeQuotes: true, //移除引号
				removeComments: true, //移除注释
			},
		}),


	],
	devServer: {
		open: true, //自动打开
		// host: '0.0.0.0',
		port: 8080, //端口
		// contentBase: path.join(__dirname, "dist"), //指向资源函数  默认是指向配置dist文件
		headers: {
			'token': '2121'
		}, //请求头
		historyApiFallback: true,
		hot: true, // DevServer 默认行为是在发现源代码被更新后通过自动刷新整个页面来做到实时预览的， 开启模块热替换功能后，它是通过在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的 在package.json 配置 --hot 或者引入webpack的HotModuleReplacementPlugin热更新
	},
	module: {
		rules: [{
				test: /\.css$/, //以点开始css结尾的文件
				use: [
					//这是一个loader，如果loader需要给参数，就写成对象的形式
					{
						loader: MiniCssExtractPlugin.loader, //loader是哪个
						options: { //所有的配置参数都要放在这个对象里面
							publicPath: '../' //这个表示在css文件里但凡用到地址的地方在其前面加个目录'../'，这个是为了能找到图片
						}
					},
					'css-loader' //这个loader没有其它选项就直接写
				]
			},
			/*转换图片的 file-loader */
			// {
			// 	test: /\.(jpg|png|gif)$/, // 在jpg,png,gif找其中  也可以添加多个
			// 	use: {
			// 		"loader": 'file-loader',
			// 		options: {
			// 			outputPath: 'img/', //会在dist文件生成对应的图片文件夹
			// 		}
			// 	}
			// },
			/* 转换图片的 
			url-loader */
			{
				test: /\.(jpg|png|gif)$/,
				//use:['file-loader']
				use: [{
					loader: 'url-loader', //把图片转成base64
					options: {
						limit: 50 * 1024, //小于50k就会转成base64
					}
				}]
			}
		]
	},
}

我们在执行一下 npm run build 会发现引入的图片已经变成base64编码的图片了

 

这里用了url-loader，并没有用file-loader，说明url-loader里已经包含了file-loader的功能

一些相关的配置，更多配置去webpack官网插件查看 url-loader

陈小白_weilin
发布了29 篇原创文章 · 获赞 4 · 访问量 3585
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_37564189/article/details/104985617
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022