Webpack打包HTML/图片/其他资源

lyz自学笔记

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何打包HTML资源

1、还是先创建两个文件：index.html/index.js，代码就不在这里显示了
2、打包HTML资源需要使用一个插件‘html-webpack-plugin’，所以需要下载插件‘html-webpack-plugins’
3、下载完成后引入webpack-config文件中

	const HtmlWebpackPlugin = require('html-webpack-plugin')

4、引入后在plugins函数中配置

	const {
   resolve} = require('path')

	module.exports = {
   
	  entry: './src/index.js',
	  output: {
   
	    filename: "build.js",
	    path: resolve(__dirname,'build')
	  },
	  module: {
   
	    rules: [
	
	    ]
	  },
	  plugins: [
	  //html-webpack-plugin：默认会创建一个空的HTML，自动引入打包输出所有资源（js/css）
	    new HtmlWebpackPlugin({
   
	   	  //使用template可以复制此文件夹下的index.html文件，就不会使用默认的
	      template: "./src/index.html"
	    })
	  ],
	  mode:'development'
	}

二、打包图片资源