webpack基本配置--html资源打包

这次，我就不安装步骤了。需要的话看我上一篇css资源打包文章.
具体文件目录如图:
这次是打包html文件资源，所以不需要用css样式，只需要在src下创建入口文件以及待会要测试的html文件，html文件随便写一些东西就行，不须纠结

• 在webpack.config.js进行配置如下

const { resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
	module.exports = {
		<!-- 入口起点 -->
		entry: './src/index.js',
		<!-- 输出文件 -->
		output:{
			<!-- 输出文件名称 -->
			filename:'built.js'
			<!-- 输出文件路径 -->
			<!-- __dirname  nodejs的变量,代表当前文件的目录绝对路径 -->
			path:resolve(__dirname,'build')
		},
		module:{
			rules:[
				{
					test:/.\css$/, //文件类型
					<!-- 注意配置css时，应该先下载再通过use使用 -->
					<!-- 下载 npm i style-loader css-loader -D 为什么要添加-D ？ 因为在mode模式中是设置为开发模式-->
					use:[
						//use数组中loader执行顺序:从右到左，从下到上，依次执行
						//创建style标签，将js中的样式资源插入进行，添加到head中生效
						'style-loader'
						//将css文件变成commonjs模块加载js中，里面内容是样式字符串
						'css-loader'
					]
				},
				<!-- 如果使用less ,sass预编译  则不能继续修改上面已经配置好的代码需要重新配置-->
				{
					test:/.\less$/,
					use:[le
						'style-loader',
						'css-loader',
						// 需要安装less和less-loader
						<!-- npm i less-loader -D -->
						// 将less编译成css文件
						'less-loader'
					]
				}
				
			]
		},
		plugins:[
			<!-- 配置plugins -->
			// plugins的配置
			        // 安装html-wwbpack-plugin
			        // 功能:默认会创建一个空的html，自动会引入打包输出的所有资源（js/css）
			        // 需求: 需要有结构的HTML 文件
			
			        new HtmlWebpackPlugin({
			            // 复制 './src/index.html' 文件,并自动会引入打包输出的所有资源（js/css）
			            template:'./src/index.html'
			        })
		],
		<!-- mode 模式-->
		mode: 'development' //开发模式
		或者
		<!-- mode: 'production' //生产模式 (需要注意的是，mode只能用其中一种模式。不能同时使用) -->
		
	}

此次，打包html资源需要用到Plugins(插件)来进行配置，其实也很简单。上述代码注释已经很清楚的说明。之后在终端打开，输入webpack打包。打包之后你会发现build文件下，不仅创建了built.js文件还会创建了index.html文件。这个是在之前创建的src下的index.html是相对应的，并且build下的index.html文件也会自动引入built.js文件。具体如图：

build下的html文件内容，并且可以通过浏览器进行查看内容。如图

对比下src下创建的html文件内容，如图

这个就是html的资源打包基本配置，后续会继续更新